feat: add AppLoaderLayout

json-server/db.json

@@ -755,7 +755,7 @@
         "isAppRedesigned": true
       },
       "jsonSettings": {
-        "theme": "app_light_theme",
+        "theme": "app_orange_theme",
         "isFirstVisit": true,
         "settingsPageHasBeenOpen": false,
         "isArticlesPageWasOpened": true

src/app/App.tsx

@@ -5,9 +5,9 @@ import { Navbar, Sidebar } from '@/widgets';
 import { classNames } from '@/shared/lib/classNames';
 import { getUserInited, initAuthData } from '@/entities/User';
 import { useAppDispatch } from '@/shared/lib/hooks/useAppDispatch/useAppDispatch';
-import { PageLoader } from '@/widgets/PageLoader';
 import { ToggleFeatures } from '@/shared/lib/features';
-import { MainLayout } from '@/shared/layouts';
+import { AppLoaderLayout, MainLayout } from '@/shared/layouts';
+import { PageLoader } from '@/widgets/PageLoader';
 
 import { AppRouter } from './providers/router';
 
@@ -22,7 +22,17 @@ export function App() {
   }, [dispatch, inited]);
 
   if (!inited) {
-    return <PageLoader />;
+    return (
+      <ToggleFeatures
+        feature="isAppRedesigned"
+        on={
+          <div className={classNames('app_redesigned', {}, [])}>
+            <AppLoaderLayout />
+          </div>
+        }
+        off={<PageLoader />}
+      />
+    );
   }
 
   return (

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

@@ -3,26 +3,33 @@ import { 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 {
   children: ReactNode;
   initialTheme?: Theme;
 }
 
+const fallbackTheme = localStorage.getItem(LOCAL_STORAGE_THEME_KEY) as Theme;
+
 export const ThemeProvider = (props: ThemeProviderProps) => {
   const { children, initialTheme } = props;
   const { theme: defaultTheme } = useJsonSettings();
   const [isThemeInited, setThemeInited] = useState(false);
-  const [theme, setTheme] = useState<Theme>(initialTheme || defaultTheme || Theme.LIGHT);
+  const [theme, setTheme] = useState<Theme>(initialTheme || fallbackTheme || Theme.LIGHT);
 
   useEffect(() => {
     if (!isThemeInited && !initialTheme && defaultTheme) {
       setTheme(defaultTheme);
       setThemeInited(true);
-      (document.childNodes[1] as HTMLElement).className = defaultTheme;
     }
   }, [defaultTheme, initialTheme, isThemeInited]);
 
+  useEffect(() => {
+    (document.childNodes[1] as HTMLElement).className = theme;
+    localStorage.setItem(LOCAL_STORAGE_THEME_KEY, theme);
+  }, [theme]);
+
   const defaultProps = useMemo(
     () => ({
       theme,

src/entities/User/model/services/initAuthData.ts

@@ -1,7 +1,10 @@
 import { createAsyncThunk } from '@reduxjs/toolkit';
 
 import { ThunkConfig } from '@/app/providers/StoreProvider';
-import { USER_LOCALSTORAGE_KEY } from '@/shared/const/localStorage';
+import {
+  LOCAL_STORAGE_LAST_DESIGN_THEME_KEY,
+  USER_LOCALSTORAGE_KEY,
+} from '@/shared/const/localStorage';
 
 import { getUserDataByIdQuery } from '../../api/userApi';
 import { User } from '../types/user';
@@ -20,6 +23,11 @@ export const initAuthData = createAsyncThunk<User, void, ThunkConfig<string>>(
     try {
       const response = await dispatch(getUserDataByIdQuery(userId)).unwrap();
 
+      localStorage.setItem(
+        LOCAL_STORAGE_LAST_DESIGN_THEME_KEY,
+        response.features?.isAppRedesigned ? 'new' : 'old',
+      );
+
       return response;
     } catch (e) {
       console.log(e);

src/entities/User/model/slice/userSlice.ts

@@ -1,6 +1,9 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 
-import { USER_LOCALSTORAGE_KEY } from '@/shared/const/localStorage';
+import {
+  LOCAL_STORAGE_LAST_DESIGN_THEME_KEY,
+  USER_LOCALSTORAGE_KEY,
+} from '@/shared/const/localStorage';
 import { setFeatureFlags } from '@/shared/lib/features';
 
 import { initAuthData } from '../services/initAuthData';
@@ -20,6 +23,10 @@ export const userSlice = createSlice({
       state.authData = action.payload;
       setFeatureFlags(action.payload.features);
       localStorage.setItem(USER_LOCALSTORAGE_KEY, action.payload.id);
+      localStorage.setItem(
+        LOCAL_STORAGE_LAST_DESIGN_THEME_KEY,
+        action.payload.features?.isAppRedesigned ? 'new' : 'old',
+      );
     },
     logout: (state) => {
       state.authData = undefined;

src/shared/const/localStorage.ts

@@ -1,3 +1,4 @@
 export const USER_LOCALSTORAGE_KEY = 'user';
 export const ARTICLES_VIEW_LOCALSTORAGE_KEY = 'articles_view';
 export const LOCAL_STORAGE_THEME_KEY = 'theme';
+export const LOCAL_STORAGE_LAST_DESIGN_THEME_KEY = 'last_design';

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

@@ -0,0 +1,7 @@
+.header {
+  padding: 16px;
+}
+
+.content {
+  height: 100%;
+}

src/shared/layouts/AppLoaderLayout/AppLoaderLayout.stories.tsx

@@ -0,0 +1,16 @@
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+import { AppLoaderLayout } from './AppLoaderLayout';
+
+export default {
+  title: 'shared/AppLoaderLayout',
+  component: AppLoaderLayout,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as ComponentMeta<typeof AppLoaderLayout>;
+
+const Template: ComponentStory<typeof AppLoaderLayout> = (args) => <AppLoaderLayout {...args} />;
+
+export const Normal = Template.bind({});
+Normal.args = {};

src/shared/layouts/AppLoaderLayout/AppLoaderLayout.tsx

@@ -0,0 +1,40 @@
+import { memo } from 'react';
+
+import { classNames } from '@/shared/lib/classNames';
+import { HStack, VStack } from '@/shared/ui/redesigned/Stack';
+import { Skeleton } from '@/shared/ui/redesigned/Skeleton';
+
+import { MainLayout } from '../MainLayout/MainLayout';
+import cls from './AppLoaderLayout.module.scss';
+
+interface AppLoaderLayoutProps {
+  className?: string;
+}
+
+export const AppLoaderLayout = memo((props: AppLoaderLayoutProps) => {
+  const { className } = props;
+
+  return (
+    <MainLayout
+      className={classNames(cls.appLoaderLayout, {}, [className])}
+      header={
+        <HStack className={cls.header}>
+          <Skeleton width={40} height={40} borderRadius="50%" />
+        </HStack>
+      }
+      content={
+        <VStack gap="16" className={cls.content}>
+          <Skeleton width="70%" height={32} borderRadius="16px" />
+          <Skeleton width="40%" height={20} borderRadius="16px" />
+          <Skeleton width="50%" height={20} borderRadius="16px" />
+          <Skeleton width="30%" height={32} borderRadius="16px" />
+          <Skeleton width="80%" height="40%" borderRadius="16px" />
+          <Skeleton width="80%" height="40%" borderRadius="16px" />
+        </VStack>
+      }
+      sidebar={<Skeleton width={220} height="100%" borderRadius="32px" />}
+    />
+  );
+});
+
+AppLoaderLayout.displayName = 'AppLoaderLayout';

src/shared/layouts/index.ts

@@ -1,2 +1,3 @@
 export { MainLayout } from './MainLayout/MainLayout';
 export { StickyContentLayout } from './StickyContentLayout/StickyContentLayout';
+export { AppLoaderLayout } from './AppLoaderLayout/AppLoaderLayout';

src/shared/lib/features/lib/setGetFeatures.ts

@@ -1,7 +1,13 @@
 import { FeatureFlags } from '@/shared/types/featureFlags';
+import { LOCAL_STORAGE_LAST_DESIGN_THEME_KEY } from '@/shared/const/localStorage';
 
+const defaultFeatures: FeatureFlags = {
+  isAppRedesigned: localStorage.getItem(LOCAL_STORAGE_LAST_DESIGN_THEME_KEY) === 'new',
+};
 // so far features doesn't change during one session
-let featureFlags: FeatureFlags = {};
+let featureFlags: FeatureFlags = {
+  ...defaultFeatures,
+};
 
 export function setFeatureFlags(newFeatureFlags?: FeatureFlags) {
   if (newFeatureFlags) {

src/shared/lib/hooks/useTheme/useTheme.ts

@@ -1,8 +1,8 @@
 import { useContext, useEffect } from 'react';
 
 import { Theme } from '@/shared/const/theme';
+import { toggleFeatures } from '@/shared/lib/features';
 
-import { toggleFeatures } from '../../features';
 import { ThemeContext } from '../../context/ThemeContext';
 
 interface UseThemeResult {
@@ -20,8 +20,6 @@ export function useTheme(): UseThemeResult {
       on: () => 'redesigned',
       off: () => '',
     })} ${theme || Theme.LIGHT}`;
-
-    (document.childNodes[1] as HTMLElement).className = theme || Theme.LIGHT;
   }, [theme]);
 
   const toggleTheme = (saveAction: (theme: Theme) => void) => {