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
136063792c