feat: redesign app loader

json-server/db.json

@@ -762,7 +762,7 @@
       },
       "avatar": "https://mobimg.b-cdn.net/v3/fetch/22/2207633df03a819cd72889249c8361a8.jpeg?w=1470&r=0.5625",
       "jsonSettings": {
-        "theme": "app_light_theme",
+        "theme": "app_dark_theme",
         "isFirstVisit": true,
         "settingsPageHasBeenOpen": false,
         "isArticlesPageWasOpened": true

src/app/App.tsx

@@ -9,7 +9,7 @@ import { getUserInited, initAuthData } from '@/entities/User';
 import { useTheme } from '@/shared/lib/hook/useTheme/useTheme';
 import { useAppDispatch } from '@/shared/lib/hook/useAppDispatch/useAppDispatch';
 import { MainLayout } from '@/shared/layouts/MainLayout';
-import { PageLoader } from '@/features/PageLoader';
+import { AppLoaderLayout } from '@/shared/layouts/AppLoaderLayout';
 
 function App() {
     const { theme } = useTheme();
@@ -21,7 +21,11 @@ function App() {
     }, [dispatch]);
 
     if (!inited) {
-        return <PageLoader />;
+        return (
+            <div id="app" className={classNames('app', {}, [theme])}>
+                <AppLoaderLayout />
+            </div>
+        );
     }
 
     return (

src/app/providers/ThemeProvider/ui/ThemeProvider.tsx

@@ -2,20 +2,23 @@ import React, { ReactNode, useEffect, useMemo, useState } from 'react';
 import { ThemeContext } from '@/shared/lib/context/ThemeContext';
 import { Theme } from '@/shared/const/theme';
 import { useJsonSettings } from '@/entities/User';
+import { LOCAL_STORAGE_THEME_KEY } from '@/shared/const/localstorage';
 
 interface ThemeProviderProps {
     initialTheme?: Theme;
     children?: ReactNode;
 }
 
+const fallbackTheme = localStorage.getItem(LOCAL_STORAGE_THEME_KEY) as Theme;
+
 const ThemeProvider = (props: ThemeProviderProps) => {
     const { initialTheme, children } = props;
 
     const { theme: defaultTheme } = useJsonSettings();
     const [isThemeInited, setIsThemeInited] = useState(false);
 
     const [theme, setTheme] = useState<Theme>(
-        initialTheme || defaultTheme || Theme.LIGHT,
+        initialTheme || fallbackTheme || defaultTheme || Theme.LIGHT,
     );
 
     useEffect(() => {
@@ -28,6 +31,7 @@ const ThemeProvider = (props: ThemeProviderProps) => {
     // for scroll theme changes
     useEffect(() => {
         document.body.className = theme;
+        localStorage.setItem(LOCAL_STORAGE_THEME_KEY, theme);
     }, [theme]);
 
     const defaultProps = useMemo(

src/shared/layouts/AppLoaderLayout/AppLoaderLayout.module.scss

@@ -0,0 +1,3 @@
+.header {
+    padding: 16px;
+}

src/shared/layouts/AppLoaderLayout/AppLoaderLayout.tsx

@@ -0,0 +1,26 @@
+import { memo } from 'react';
+import { Skeleton } from '@/shared/ui/redesigned/Skeleton';
+import { HStack, VStack } from '@/shared/ui/redesigned/Stack';
+import { MainLayout } from '../MainLayout';
+import cls from './AppLoaderLayout.module.scss';
+
+export const AppLoaderLayout = memo(() => (
+    <MainLayout
+        header={
+            <HStack className={cls.header}>
+                <Skeleton width={40} height={40} border="50%" />
+            </HStack>
+        }
+        content={
+            <VStack gap="16" style={{ height: '100%' }}>
+                <Skeleton width="70%" height={32} border="16px" />
+                <Skeleton width="40%" height={20} border="16px" />
+                <Skeleton width="50%" height={20} border="16px" />
+                <Skeleton width="30%" height={32} border="16px" />
+                <Skeleton width="80%" height="40%" border="16px" />
+                <Skeleton width="80%" height="40%" border="16px" />
+            </VStack>
+        }
+        sidebar={<Skeleton border="32px" width={220} height="100%" />}
+    />
+));

src/shared/layouts/AppLoaderLayout/index.ts

@@ -0,0 +1 @@
+export { AppLoaderLayout } from './AppLoaderLayout';