✨ feat(loading): Add loading components and integrate them in Providers

apps/admin/services/common/oauth.ts

@@ -32,7 +32,6 @@ export async function appleLoginCallback(
   return request<API.Response & { data?: any }>('/v1/auth/oauth/callback/apple', {
     method: 'POST',
     data: formData,
-    requestType: 'form',
     ...(options || {}),
   });
 }

apps/user/components/loading.tsx

@@ -0,0 +1,33 @@
+interface LoadingProps {
+  loading?: boolean;
+}
+
+export default function Loading({ loading = true }: LoadingProps) {
+  return (
+    <div
+      className={`fixed inset-0 z-[9999] flex items-center justify-center transition-all duration-500 ${
+        loading
+          ? 'bg-background/95 pointer-events-auto opacity-100 backdrop-blur-[2px]'
+          : 'pointer-events-none bg-transparent opacity-0 backdrop-blur-0'
+      }`}
+    >
+      <div
+        className={`transform-gpu transition-all duration-500 ${
+          loading ? 'scale-100 opacity-100' : 'scale-50 opacity-0'
+        }`}
+      >
+        <div className='relative h-32 w-32 animate-[spin_3s_linear_infinite] overflow-hidden rounded-full shadow-[0_0_15px_rgba(0,0,0,0.1)] dark:shadow-[0_0_15px_rgba(255,255,255,0.1)]'>
+          <div className='absolute inset-0 h-full w-full rounded-full bg-black shadow-inner dark:bg-white'>
+            <div className='absolute right-0 top-0 h-full w-1/2 rounded-r-full bg-white shadow-sm dark:bg-black' />
+            <div className='absolute left-1/2 top-0 h-1/2 w-1/2 -translate-x-1/2 rounded-full bg-white shadow-sm dark:bg-black'>
+              <div className='absolute left-1/2 top-1/2 h-1/4 w-1/4 -translate-x-1/2 -translate-y-1/2 rounded-full bg-black shadow-inner dark:bg-white' />
+            </div>
+            <div className='absolute bottom-0 left-1/2 h-1/2 w-1/2 -translate-x-1/2 rounded-full bg-black shadow-sm dark:bg-white'>
+              <div className='absolute left-1/2 top-1/2 h-1/4 w-1/4 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white shadow-inner dark:bg-black' />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/user/components/providers.tsx

@@ -6,6 +6,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryStreamedHydration } from '@tanstack/react-query-next-experimental';
 import { ThemeProvider as NextThemesProvider } from 'next-themes';
 import React, { useEffect, useState } from 'react';
+import Loading from './loading';
 
 export default function Providers({
   children,
@@ -16,6 +17,7 @@ export default function Providers({
   common: Partial<GlobalStore['common']>;
   user: GlobalStore['user'];
 }) {
+  const [loading, setLoading] = useState(true);
   const [queryClient] = useState(
     () =>
       new QueryClient({
@@ -31,16 +33,23 @@ export default function Providers({
   const { setCommon, setUser } = useGlobalStore();
 
   useEffect(() => {
-    if (user) {
-      setUser(user);
-    } else {
-      Logout();
-    }
-  }, [setUser, user]);
+    const initializeData = async () => {
+      try {
+        if (user) {
+          setUser(user);
+        } else {
+          Logout();
+        }
+        setCommon(common);
+      } finally {
+        setTimeout(() => {
+          setLoading(false);
+        }, 1000);
+      }
+    };
 
-  useEffect(() => {
-    setCommon(common);
-  }, [setCommon, common]);
+    initializeData();
+  }, [setUser, setCommon, user, common]);
 
   useEffect(() => {
     const searchParams = new URLSearchParams(location.search);
@@ -53,7 +62,10 @@ export default function Providers({
   return (
     <NextThemesProvider attribute='class' defaultTheme='system' enableSystem>
       <QueryClientProvider client={queryClient}>
-        <ReactQueryStreamedHydration>{children}</ReactQueryStreamedHydration>
+        <ReactQueryStreamedHydration>
+          <Loading loading={loading || queryClient.isMutating() > 0} />
+          {children}
+        </ReactQueryStreamedHydration>
       </QueryClientProvider>
     </NextThemesProvider>
   );

apps/user/services/common/oauth.ts

@@ -32,7 +32,6 @@ export async function appleLoginCallback(
   return request<API.Response & { data?: any }>('/v1/auth/oauth/callback/apple', {
     method: 'POST',
     data: formData,
-    requestType: 'form',
     ...(options || {}),
   });
 }