From 26f1dd550d99025ca1368a48b6c7f09090feac7b Mon Sep 17 00:00:00 2001
From: lizerk <lizerk-dev@gmail.com>
Date: Fri, 3 Apr 2026 21:12:20 +0300
Subject: [PATCH] =?UTF-8?q?=D1=84=D0=B8=D0=BA=D1=81=20=D1=84=D1=80=D0=BE?=
 =?UTF-8?q?=D0=BD=D1=82=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/app/documents/page.tsx         | 21 ++++++++++++++++++++-
 frontend/src/app/messages/[chatId]/page.tsx | 21 ++++++++++++++++++++-
 frontend/src/app/page.tsx                   | 21 ++++++++++++++++++++-
 frontend/src/app/requests/page.tsx          | 21 ++++++++++++++++++++-
 4 files changed, 80 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/documents/page.tsx b/frontend/src/app/documents/page.tsx
index 1fc36772..09e25802 100644
--- a/frontend/src/app/documents/page.tsx
+++ b/frontend/src/app/documents/page.tsx
@@ -2,7 +2,7 @@
 
 import { AppShell } from "../../components/AppShell";
 import { apiClient } from "@/lib/api";
-import { useEffect, useMemo, useState } from "react";
+import { Suspense, useEffect, useMemo, useState } from "react";
 import dynamic from "next/dynamic";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import type { Document } from "@/types/api";
@@ -63,6 +63,25 @@ function formatDate(value?: string): string {
 }
 
 export default function DocumentsPage() {
+  return (
+    <Suspense fallback={<DocumentsPageFallback />}>
+      <DocumentsPageContent />
+    </Suspense>
+  );
+}
+
+function DocumentsPageFallback() {
+  return (
+    <AppShell>
+      <section className="rounded-2xl bg-white p-6 text-center shadow-sm ring-1 ring-gray-100">
+        <div className="inline-block h-5 w-5 animate-spin rounded-full border-2 border-gray-300 border-t-sky-600"></div>
+        <p className="mt-3 text-sm text-gray-500">Загрузка документов...</p>
+      </section>
+    </AppShell>
+  );
+}
+
+function DocumentsPageContent() {
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = useSearchParams();
diff --git a/frontend/src/app/messages/[chatId]/page.tsx b/frontend/src/app/messages/[chatId]/page.tsx
index c65b899f..274d1e0a 100644
--- a/frontend/src/app/messages/[chatId]/page.tsx
+++ b/frontend/src/app/messages/[chatId]/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useEffect, useLayoutEffect, useMemo, useRef, useState, useCallback } from "react";
+import React, { Suspense, useEffect, useLayoutEffect, useMemo, useRef, useState, useCallback } from "react";
 import { useParams, usePathname, useRouter, useSearchParams } from "next/navigation";
 import { MessageCircle, ChevronDown, ChevronLeft, ChevronRight } from "lucide-react";
 import { AppShell } from "../../../components/AppShell";
@@ -61,6 +61,25 @@ function formatDateInputValue(date: Date): string {
 /* ─── component ─── */
 
 export default function MessageDialogPage() {
+  return (
+    <Suspense fallback={<MessageDialogPageFallback />}>
+      <MessageDialogPageContent />
+    </Suspense>
+  );
+}
+
+function MessageDialogPageFallback() {
+  return (
+    <AppShell>
+      <section className="rounded-2xl bg-white p-6 text-center shadow-sm ring-1 ring-gray-100">
+        <div className="inline-block h-5 w-5 animate-spin rounded-full border-2 border-gray-300 border-t-sky-600"></div>
+        <p className="mt-3 text-sm text-gray-500">Загрузка чата...</p>
+      </section>
+    </AppShell>
+  );
+}
+
+function MessageDialogPageContent() {
   const params = useParams<{ chatId: string }>();
   const router = useRouter();
   const pathname = usePathname();
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 0d7a9071..df8d0bba 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -5,7 +5,7 @@ import { AppShell } from "../components/AppShell";
 import { Modal } from "@/components/ui";
 import { apiClient } from "@/lib/api";
 import { resolveMediaUrl } from "@/lib/url";
-import { useEffect, useRef, useState } from "react";
+import { Suspense, useEffect, useRef, useState } from "react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import type { Comment, Post } from "@/types/api";
 import { useUser } from "@/contexts/UserContext";
@@ -19,6 +19,25 @@ type LikeUser = {
 };
 
 export default function Home() {
+  return (
+    <Suspense fallback={<HomePageFallback />}>
+      <HomePageContent />
+    </Suspense>
+  );
+}
+
+function HomePageFallback() {
+  return (
+    <AppShell>
+      <section className="rounded-2xl bg-white p-6 text-center shadow-sm ring-1 ring-gray-100">
+        <div className="inline-block h-5 w-5 animate-spin rounded-full border-2 border-gray-300 border-t-sky-600"></div>
+        <p className="mt-3 text-sm text-gray-500">Загрузка ленты...</p>
+      </section>
+    </AppShell>
+  );
+}
+
+function HomePageContent() {
   const { user } = useUser();
   const router = useRouter();
   const pathname = usePathname();
diff --git a/frontend/src/app/requests/page.tsx b/frontend/src/app/requests/page.tsx
index 5ea82029..3d46db08 100644
--- a/frontend/src/app/requests/page.tsx
+++ b/frontend/src/app/requests/page.tsx
@@ -6,7 +6,7 @@ import { Modal } from "@/components/ui";
 import { apiClient } from "@/lib/api";
 import { useUser } from "@/contexts/UserContext";
 import { canManageRequests, canProcessRequests } from "@/lib/permissions";
-import { useEffect, useRef } from "react";
+import { Suspense, useEffect, useRef } from "react";
 import Link from "next/link";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import type { User } from "@/types/api";
@@ -25,6 +25,25 @@ import {
 const SwipeApprovalMode = dynamic(() => import("@/components/requests/SwipeApprovalMode"), { ssr: false });
 
 export default function RequestsPage() {
+  return (
+    <Suspense fallback={<RequestsPageFallback />}>
+      <RequestsPageContent />
+    </Suspense>
+  );
+}
+
+function RequestsPageFallback() {
+  return (
+    <AppShell>
+      <section className="rounded-2xl bg-white p-6 text-center shadow-sm ring-1 ring-gray-100">
+        <div className="inline-block h-5 w-5 animate-spin rounded-full border-2 border-gray-300 border-t-sky-600"></div>
+        <p className="mt-3 text-sm text-gray-500">Загрузка заявлений...</p>
+      </section>
+    </AppShell>
+  );
+}
+
+function RequestsPageContent() {
   const { user } = useUser();
   const router = useRouter();
   const pathname = usePathname();