Add loading layout, fallback theme

src/app/App.tsx

@@ -9,9 +9,10 @@ import { Navbar } from '@/widgets/Navbar'
 import { Sidebar } from '@/widgets/Sidebar'
 import { getUserInited, initAuthData } from '@/entities/User'
 import { useAppDispatch } from '@/shared/lib/hooks/useAppDispatch/useAppDispatch'
-import { PageLoader } from '@/widgets/PageLoader'
 import { ToggleFeaturesComponent } from '@/shared/lib/features'
 import { MainLayout } from '@/shared/layouts/MainLayout'
+import { AppLoaderLayout } from '@/shared/layouts/AppLoaderLayout'
+import { PageLoader } from '@/widgets/PageLoader'
 
 function App() {
   const { theme } = useTheme()
@@ -48,7 +49,7 @@ function App() {
 
     redesignedContent = (
       <div id="app" className={classNames('app_redesigned', {}, [theme])}>
-        <PageLoader />
+        <AppLoaderLayout />
       </div>
     )
   }

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

@@ -4,18 +4,21 @@ import { ThemeContext } from '../../../../shared/lib/context/ThemeContext'
 
 import { Theme } from '@/shared/const/theme'
 import { useJsonUserSettings } from '@/entities/User'
+import { LOCAL_STORAGE_THEME_KEY } from '@/shared/const/lodalStorage'
 
 interface ThemeProviderProps {
   children: ReactNode
   initialTheme?: Theme
 }
 
+const fallbackTheme = localStorage.getItem(LOCAL_STORAGE_THEME_KEY) as Theme
+
 const ThemeProvider = (props: ThemeProviderProps) => {
   const { initialTheme, children } = props
   const { theme: defaultTheme } = useJsonUserSettings()
   const [isThemeInited, setIsThemeInited] = useState(false)
 
-  const [theme, setTheme] = useState<Theme>(initialTheme || defaultTheme || Theme.LIGHT)
+  const [theme, setTheme] = useState<Theme>(initialTheme || fallbackTheme || Theme.LIGHT)
 
   useEffect(() => {
     if (!isThemeInited && defaultTheme) {
@@ -24,6 +27,11 @@ const ThemeProvider = (props: ThemeProviderProps) => {
     }
   }, [defaultTheme, isThemeInited])
 
+  useEffect(() => {
+    document.body.className = theme
+    localStorage.setItem(LOCAL_STORAGE_THEME_KEY, theme)
+  }, [theme])
+
   const defaultProps = useMemo(
     () => ({
       theme,

src/app/styles/index.scss

@@ -31,10 +31,30 @@ body {
 }
 
 *::-webkit-scrollbar-track {
-  background: var(--card-bg);
+  background: var(--light-bg-redesigned);
 }
 
 *::-webkit-scrollbar-thumb {
+  background-color: var(--accent-redesigned);
+
+  /* цвет плашки */
+  border-radius: 10px;
+
+  /* закругления плашки */
+  border: 1px solid var(--accent-redesigned);
+
+  /* padding вокруг плашки */
+}
+
+.app *::-webkit-scrollbar {
+  width: 4px;
+}
+
+.app *::-webkit-scrollbar-track {
+  background: var(--card-bg);
+}
+
+.app *::-webkit-scrollbar-thumb {
   background-color: var(--primary-color);
 
   /* цвет плашки */

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

@@ -4,7 +4,7 @@ import { User } from '../types/user'
 import { getUserDataByIdQuery } from '../api/userApi'
 
 import { ThunkConfig } from '@/app/providers/StoreProvider'
-import { USER_LOCALSTORAGE_KEY } from '@/shared/const/lodalStorage'
+import { LOCAL_STORAGE_LAST_DESIGN_THEME_KEY, USER_LOCALSTORAGE_KEY } from '@/shared/const/lodalStorage'
 
 export const initAuthData = createAsyncThunk<User, void, ThunkConfig<string>>(
   'user/initAuthData',
@@ -19,6 +19,7 @@ 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) {
       return rejectWithValue('error')

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

@@ -5,7 +5,7 @@ import { saveJsonSettings } from '../services/saveJsonSettings'
 import { JsonSettings } from '../types/jsonSettings'
 import { initAuthData } from '../services/initAuthData'
 
-import { USER_LOCALSTORAGE_KEY } from '@/shared/const/lodalStorage'
+import { LOCAL_STORAGE_LAST_DESIGN_THEME_KEY, USER_LOCALSTORAGE_KEY } from '@/shared/const/lodalStorage'
 import { setFeatureFlags } from '@/shared/lib/features'
 
 const initialState: UserSchema = {
@@ -19,6 +19,10 @@ export const userSlice = createSlice({
     setAuthData: (state, action: PayloadAction<User>) => {
       state.authData = action.payload
       localStorage.setItem(USER_LOCALSTORAGE_KEY, action.payload.id)
+      localStorage.setItem(
+        LOCAL_STORAGE_LAST_DESIGN_THEME_KEY,
+        action.payload.features?.isAppRedesigned ? 'new' : 'old',
+      )
       setFeatureFlags(action.payload.features)
     },
     logout: (state) => {

src/features/AuthByUsername/ui/LoginForm/LoginForm.tsx

@@ -59,6 +59,7 @@ const LoginForm = React.memo((props: LoginFormProps) => {
     const result = await dispatch(loginByUsername({ username, password }))
     if (result.meta.requestStatus === 'fulfilled') {
       onSuccess()
+      window.location.reload()
     }
   }, [dispatch, username, password, onSuccess])
 

src/shared/const/lodalStorage.ts

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

src/shared/layouts/AppLoaderLayout/index.ts

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

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

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

src/shared/layouts/AppLoaderLayout/ui/AppLoaderLayout.tsx

@@ -0,0 +1,28 @@
+import { memo } from 'react'
+
+import { MainLayout } from '../../MainLayout'
+import cls from './AppLoaderLayout.module.scss'
+
+import { HStack, VStack } from '@/shared/ui/redesigned/Stack'
+import { Skeleton } from '@/shared/ui/redesigned/Skeleton'
+
+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 width={220} height="100%" border="32px" />}
+  />
+))

src/shared/layouts/MainLayout/ui/MainLayout.tsx

@@ -8,7 +8,7 @@ interface MainLayoutProps {
   className?: string
   header: ReactNode
   sidebar: ReactNode
-  toolbar: ReactNode
+  toolbar?: ReactNode
   content: ReactNode
 }
 

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

@@ -1,6 +1,13 @@
+import { LOCAL_STORAGE_LAST_DESIGN_THEME_KEY } from '@/shared/const/lodalStorage'
 import { FeatureFlags } from '@/shared/types/featureFlags'
 
-let featureFlags: FeatureFlags = {}
+const defaultFeatures = {
+  isAppRedesigned: localStorage.getItem(LOCAL_STORAGE_LAST_DESIGN_THEME_KEY) === 'new',
+}
+
+let featureFlags: FeatureFlags = {
+  ...defaultFeatures,
+}
 
 export function setFeatureFlags(newFeatureFlags?: FeatureFlags) {
   if (newFeatureFlags) {