fix/notification-page

src/pages/profile/ui/notifications-page/NotificationsPage.tsx

@@ -1,106 +1,18 @@
 'use client';
 
-import { useReducer } from 'react';
-import { CardSection, FloatingSaveBar, OptionGroup, Switch } from 'shared/ui';
-import { UserQueries } from 'entities/user';
-import { useUpdateNotifications } from '../../api/useUpdateNotifications';
-import { useQuery } from '@tanstack/react-query';
-import { notificationItems } from '../../config/notifications';
-import { NotificationChannel, Notifications } from '../../model/notifications';
-
-type NotificationsState = Notifications | null;
-
-type NotificationsAction = {
-  type: 'set';
-  payload: NotificationsState;
-};
-
-const notificationsReducer = (
-  _state: NotificationsState,
-  action: NotificationsAction
-): NotificationsState => {
-  switch (action.type) {
-    case 'set':
-      return action.payload;
-    default:
-      return _state;
+import dynamic from 'next/dynamic';
+import { NotificationsPageFallback } from './NotificationsPageFallback';
+
+const NotificationsPageContent = dynamic(
+  () => import('./NotificationsPageContent').then((mod) => mod.NotificationsPageContent),
+  {
+    ssr: false,
+    loading: () => <NotificationsPageFallback />,
   }
-};
+);
 
 function NotificationsPage() {
-  const query = useQuery(UserQueries.getMe());
-  const notifications = query.data?.notifications;
-  const [localNotifications, dispatchLocalNotifications] = useReducer(
-    notificationsReducer,
-    notifications ?? null
-  );
-  const dirty = JSON.stringify(notifications) !== JSON.stringify(localNotifications);
-  const sendSettings = useUpdateNotifications();
-
-  const handleToggle = <TChannel extends NotificationChannel>(
-    channel: TChannel,
-    key: keyof Notifications[TChannel],
-    checked: boolean
-  ) => {
-    if (!localNotifications) {
-      return;
-    }
-
-    const nextNotifications: Notifications = {
-      ...localNotifications,
-      [channel]: {
-        ...localNotifications[channel],
-        [key]: checked,
-      },
-    } as Notifications;
-
-    dispatchLocalNotifications({ type: 'set', payload: nextNotifications });
-  };
-
-  return (
-    <>
-      <CardSection
-        title="Уведомления"
-        description="Настройки почтовых и push-уведомлений."
-        className="space-y-5"
-      >
-        {Object.entries(notificationItems).map(([channel, items]) => {
-          const ch = channel as NotificationChannel;
-          return (
-            <OptionGroup
-              key={channel}
-              name={channel}
-              items={items.map((item) => {
-                const key = item.key as keyof Notifications[typeof ch];
-
-                return {
-                  key: item.key,
-                  label: item.label,
-                  input: (props) => (
-                    <Switch
-                      checked={localNotifications?.[ch][key] ?? false}
-                      disabled={query.isLoading}
-                      onCheckedChange={(checked) => handleToggle(ch, key, checked)}
-                      aria-label={item.ariaLabel}
-                      {...props}
-                    />
-                  ),
-                };
-              })}
-            />
-          );
-        })}
-      </CardSection>
-      <FloatingSaveBar
-        visible={dirty}
-        onSave={() => localNotifications && sendSettings.mutate(localNotifications)}
-        onDiscard={() =>
-          notifications && dispatchLocalNotifications({ type: 'set', payload: notifications })
-        }
-        pending={sendSettings.isPending}
-      />
-    </>
-  );
+  return <NotificationsPageContent />;
 }
 
 export { NotificationsPage };

src/pages/profile/ui/notifications-page/NotificationsPageContent.tsx

@@ -0,0 +1,110 @@
+'use client';
+
+import { useReducer } from 'react';
+import { CardSection, FloatingSaveBar, OptionGroup, Switch } from 'shared/ui';
+import { UserQueries } from 'entities/user';
+import { useUpdateNotifications } from '../../api/useUpdateNotifications';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import { notificationItems } from '../../config/notifications';
+import { NotificationChannel, type Notifications } from '../../model/notifications';
+
+type NotificationsState = Notifications | null;
+
+type NotificationsAction = {
+  type: 'set';
+  payload: NotificationsState;
+};
+
+const notificationsReducer = (
+  _state: NotificationsState,
+  action: NotificationsAction
+): NotificationsState => {
+  switch (action.type) {
+    case 'set':
+      return action.payload;
+    default:
+      return _state;
+  }
+};
+
+function NotificationsPageContent() {
+  const query = useSuspenseQuery(UserQueries.getMe());
+  const notifications = query.data?.notifications;
+  const [localNotifications, dispatchLocalNotifications] = useReducer(
+    notificationsReducer,
+    notifications ?? null
+  );
+
+  const dirty =
+    !query.isError &&
+    !query.isLoading &&
+    JSON.stringify(notifications) !== JSON.stringify(localNotifications);
+  const sendSettings = useUpdateNotifications();
+
+  const handleToggle = <TChannel extends NotificationChannel>(
+    channel: TChannel,
+    key: keyof Notifications[TChannel],
+    checked: boolean
+  ) => {
+    if (!localNotifications) {
+      return;
+    }
+
+    const nexNotifications: Notifications = {
+      ...localNotifications,
+      [channel]: {
+        ...localNotifications[channel],
+        [key]: checked,
+      },
+    } as Notifications;
+
+    dispatchLocalNotifications({ type: 'set', payload: nexNotifications });
+  };
+
+  return (
+    <>
+      <CardSection
+        title="Уведомления"
+        description="Настройки почтовых и push-уведомлений."
+        className="space-y-5"
+      >
+        {Object.entries(notificationItems).map(([channel, items]) => {
+          const ch = channel as NotificationChannel;
+          return (
+            <OptionGroup
+              key={channel}
+              name={channel}
+              items={items.map((item) => {
+                const key = item.key as keyof Notifications[typeof ch];
+
+                return {
+                  key: item.key,
+                  label: item.label,
+                  input: (props) => (
+                    <Switch
+                      checked={localNotifications?.[ch][key] ?? false}
+                      disabled={query.isLoading}
+                      onCheckedChange={(checked) => handleToggle(ch, key, checked)}
+                      aria-label={item.ariaLabel}
+                      {...props}
+                    />
+                  ),
+                };
+              })}
+            />
+          );
+        })}
+      </CardSection>
+      <FloatingSaveBar
+        visible={dirty}
+        onSave={() => localNotifications && sendSettings.mutate(localNotifications)}
+        onDiscard={() =>
+          notifications && dispatchLocalNotifications({ type: 'set', payload: notifications })
+        }
+        pending={sendSettings.isPending}
+      />
+    </>
+  );
+}
+
+export { NotificationsPageContent };

src/pages/profile/ui/notifications-page/NotificationsPageFallback.tsx

@@ -0,0 +1,29 @@
+import { CardSection, OptionGroup, Skeleton } from 'shared/ui';
+
+export function NotificationsPageFallback() {
+  return (
+    <CardSection
+      title="Уведомления"
+      description="Настройки почтовых и push-уведомлений."
+      className="space-y-5"
+    >
+      <OptionGroupSkeleton />
+    </CardSection>
+  );
+}
+function OptionGroupSkeleton({ items = 3 }: { items?: number }) {
+  return (
+    <div className="space-y-1.5">
+      <Skeleton className="h-4 w-16" />
+
+      <div className="divide-muted-foreground/20 border-muted-foreground/20 !divide-y rounded-lg border">
+        {Array.from({ length: items }).map((_, i) => (
+          <div key={i} className="flex items-center justify-between rounded-none px-4 py-3">
+            <Skeleton className="h-5 w-32" />
+            <Skeleton className="h-5.5 w-8 rounded-full" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}