feat: implement loading states in SpaceOAuthCallback and HomeSidebar components using Suspense

web/src/app/auth/space/callback/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, useState, useCallback } from 'react';
+import { useEffect, useState, useCallback, Suspense } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { httpClient } from '@/app/infra/http/HttpClient';
 import { toast } from 'sonner';
@@ -21,7 +21,7 @@ import {
 import { Button } from '@/components/ui/button';
 import langbotIcon from '@/app/assets/langbot-logo.webp';
 
-export default function SpaceOAuthCallback() {
+function SpaceOAuthCallbackContent() {
   const router = useRouter();
   const searchParams = useSearchParams();
   const { t } = useTranslation();
@@ -216,3 +216,23 @@ export default function SpaceOAuthCallback() {
     </div>
   );
 }
+
+function LoadingFallback() {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-neutral-900">
+      <Card className="w-[400px] shadow-lg dark:shadow-white/10">
+        <CardContent className="flex flex-col items-center py-12">
+          <Loader2 className="h-12 w-12 animate-spin text-primary" />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+export default function SpaceOAuthCallback() {
+  return (
+    <Suspense fallback={<LoadingFallback />}>
+      <SpaceOAuthCallbackContent />
+    </Suspense>
+  );
+}

web/src/app/home/components/home-sidebar/HomeSidebar.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import styles from './HomeSidebar.module.css';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, Suspense } from 'react';
 import {
   SidebarChild,
   SidebarChildVO,
@@ -20,6 +20,7 @@ import {
   Lightbulb,
   LogOut,
   KeyRound,
+  Loader2,
 } from 'lucide-react';
 import { useTheme } from 'next-themes';
 
@@ -58,7 +59,7 @@ function compareVersions(v1: string, v2: string): boolean {
 }
 
 // TODO 侧边导航栏要加动画
-export default function HomeSidebar({
+function HomeSidebarContent({
   onSelectedChangeAction,
 }: {
   onSelectedChangeAction: (sidebarChild: SidebarChildVO) => void;
@@ -482,3 +483,25 @@ export default function HomeSidebar({
     </div>
   );
 }
+
+function SidebarLoadingFallback() {
+  return (
+    <div className={`${styles.sidebarContainer}`}>
+      <div className="flex items-center justify-center h-full">
+        <Loader2 className="h-6 w-6 animate-spin" />
+      </div>
+    </div>
+  );
+}
+
+export default function HomeSidebar({
+  onSelectedChangeAction,
+}: {
+  onSelectedChangeAction: (sidebarChild: SidebarChildVO) => void;
+}) {
+  return (
+    <Suspense fallback={<SidebarLoadingFallback />}>
+      <HomeSidebarContent onSelectedChangeAction={onSelectedChangeAction} />
+    </Suspense>
+  );
+}