feat: add skeleton UI components for QuestionReplyPage, SessionPage, …

…and route

apps/client/src/pages/session/ui/QuestionReplyPage.tsx

@@ -1,14 +1,16 @@
-import React from 'react';
+import React, { Suspense } from 'react';
+
+import { ReplyListSkeletonUI } from '@/widgets/reply-list';
 
 const LazyQuestionReplyPage = React.lazy(() =>
   import('@/widgets/reply-list').then((module) => ({ default: module.ReplyList })),
 );
 
 function QuestionReplyPage() {
   return (
-    <React.Suspense fallback={null}>
+    <Suspense fallback={<ReplyListSkeletonUI />}>
       <LazyQuestionReplyPage />
-    </React.Suspense>
+    </Suspense>
   );
 }
 

apps/client/src/pages/session/ui/SessionPage.tsx

@@ -1,5 +1,6 @@
-import { useEffect } from 'react';
-import React from 'react';
+import React, { Suspense, useEffect } from 'react';
+
+import { QuestionListSkeletonUI } from '@/widgets/question-list';
 
 import { useSessionStore } from '@/entities/session';
 
@@ -16,7 +17,11 @@ function SessionPage() {
     }
   }, [sessionTitle]);
 
-  return <LazyQuestionList />;
+  return (
+    <Suspense fallback={<QuestionListSkeletonUI />}>
+      <LazyQuestionList />
+    </Suspense>
+  );
 }
 
 export default SessionPage;

apps/client/src/routes/session/route.tsx

@@ -1,5 +1,7 @@
 import { createFileRoute, Outlet, redirect, ScrollRestoration } from '@tanstack/react-router';
-import React from 'react';
+import React, { Suspense } from 'react';
+
+import { ChattingListSkeletonUI } from '@/widgets/chatting-list';
 
 import { SocketProvider } from '@/features/socket';
 
@@ -16,7 +18,9 @@ export const Route = createFileRoute('/session')({
       <SocketProvider>
         <ScrollRestoration />
         <Outlet />
-        <LazyChattingList />
+        <Suspense fallback={<ChattingListSkeletonUI />}>
+          <LazyChattingList />
+        </Suspense>
       </SocketProvider>
     </div>
   ),