Description
Currently, our UI components (especially the Folder and Face Cluster views) lack a granular feedback loop. When a user interacts with AI-intensive features, there is no standardized way to reflect the "Processing" or "Queued" status at the UI level.
I propose enhancing our Redux slices and selectors to support a more reactive and professional user interface.
Proposed UI Improvements
- Shimmer/Skeleton Loading: Instead of a blank screen while
setClusters is being populated, we should implement a loading state in the slice to trigger "Skeleton" components in the frontend.
- AI-Status Overlays: Enhance the
FolderDetails type and selectors to track 'Current Task' (e.g., "Indexing", "Clustering"). This allows us to show a progress overlay directly on the folder icon in the sidebar.
- Optimized Image Transitions: The
selectCurrentViewIndex can be expanded to handle "Pre-fetching" logic, so the next image in the gallery is ready before the user clicks "Next," eliminating the flicker.
Technical Implementation
- Slice Update: Add a
uiStatus: Record<string, 'loading' | 'error' | 'idle'> map to the slices to track the status of individual folders/clusters.
- Selector Optimization: Create a memoized
selectIsProcessing(id) selector to prevent unnecessary re-renders of the entire list when only one item is being updated.
Impact
This will transform PictoPy from a "Static Explorer" into a "Responsive Media Hub," providing the kind of high-quality UX found in apps like Google Photos or Lightroom.
Checklist
Description
Currently, our UI components (especially the Folder and Face Cluster views) lack a granular feedback loop. When a user interacts with AI-intensive features, there is no standardized way to reflect the "Processing" or "Queued" status at the UI level.
I propose enhancing our Redux slices and selectors to support a more reactive and professional user interface.
Proposed UI Improvements
setClustersis being populated, we should implement aloadingstate in the slice to trigger "Skeleton" components in the frontend.FolderDetailstype and selectors to track 'Current Task' (e.g., "Indexing", "Clustering"). This allows us to show a progress overlay directly on the folder icon in the sidebar.selectCurrentViewIndexcan be expanded to handle "Pre-fetching" logic, so the next image in the gallery is ready before the user clicks "Next," eliminating the flicker.Technical Implementation
uiStatus: Record<string, 'loading' | 'error' | 'idle'>map to the slices to track the status of individual folders/clusters.selectIsProcessing(id)selector to prevent unnecessary re-renders of the entire list when only one item is being updated.Impact
This will transform PictoPy from a "Static Explorer" into a "Responsive Media Hub," providing the kind of high-quality UX found in apps like Google Photos or Lightroom.
Checklist