136063792c
Restructured the Discover page to prevent the entire page from refreshing when selecting categories or updating settings 1. Component Separation -Split the page into three main components: -DiscoverHeader: Contains the title, settings button, and category navigation -DiscoverContent: Contains the grid of articles with its own loading state -PreferencesModal: Manages the settings modal with temporary state 2. Optimized Rendering -Used React.memo for all components to prevent unnecessary re-renders -Each component only receives the props it needs -The header remains stable while only the content area updates 3. Improved Loading States 3.1. Added separate loading states: -Initial loading for the first page load -Content-only loading when changing categories or preferences -Loading spinners now only appear in the content area when changing categories 3.2. Better State Management -Main state is managed in the parent component -Modal uses temporary state that only updates the main state after saving -Clear separation of concerns between components These changes create a more polished user experience where the header and sidebar remain stable while only the content area refreshes when needed. The page now feels more responsive and app-like, rather than having the entire page refresh on every interaction |
||
|---|---|---|
| .. | ||
| c/[chatId] | ||
| discover | ||
| library | ||
| settings | ||
| favicon.ico | ||
| globals.css | ||
| layout.tsx | ||
| page.tsx | ||