fix: fix skeletons for notifications

sashtje · Oct 13, 2023 · e691114 · e691114
1 parent 87bb3e1
commit e691114
Showing 1 changed file with 20 additions and 6 deletions.
diff --git a/src/entities/Notification/ui/NotificationsList/NotificationsList.tsx b/src/entities/Notification/ui/NotificationsList/NotificationsList.tsx
@@ -2,7 +2,9 @@ import { memo } from 'react';
 
 import { classNames } from '@/shared/lib/classNames';
 import { VStack } from '@/shared/ui/redesigned/Stack';
-import { Skeleton } from '@/shared/ui/deprecated/Skeleton';
+import { Skeleton as SkeletonDeprecated } from '@/shared/ui/deprecated/Skeleton';
+import { Skeleton } from '@/shared/ui/redesigned/Skeleton';
+import { ToggleFeatures } from '@/shared/lib/features';
 
 import { NotificationItem } from '../../ui/NotificationItem/NotificationItem';
 import { useNotifications } from '../../api/notificationApi';
@@ -19,11 +21,23 @@ export const NotificationsList = memo((props: NotificationsListProps) => {
 
   if (isLoading) {
     return (
-      <VStack gap="16" max className={classNames('', {}, [className])}>
-        <Skeleton width="100%" borderRadius="8px" height={80} />
-        <Skeleton width="100%" borderRadius="8px" height={80} />
-        <Skeleton width="100%" borderRadius="8px" height={80} />
-      </VStack>
+      <ToggleFeatures
+        feature="isAppRedesigned"
+        on={
+          <VStack gap="16" max className={classNames('', {}, [className])}>
+            <Skeleton width="100%" borderRadius="8px" height={80} />
+            <Skeleton width="100%" borderRadius="8px" height={80} />
+            <Skeleton width="100%" borderRadius="8px" height={80} />
+          </VStack>
+        }
+        off={
+          <VStack gap="16" max className={classNames('', {}, [className])}>
+            <SkeletonDeprecated width="100%" borderRadius="8px" height={80} />
+            <SkeletonDeprecated width="100%" borderRadius="8px" height={80} />
+            <SkeletonDeprecated width="100%" borderRadius="8px" height={80} />
+          </VStack>
+        }
+      />
     );
   }