fix: space user validation check

space/app/loading.tsx

@@ -0,0 +1,20 @@
+"use client";
+import Image from "next/image";
+import { useTheme } from "next-themes";
+// assets
+import LogoSpinnerDark from "@/public/images/logo-spinner-dark.gif";
+import LogoSpinnerLight from "@/public/images/logo-spinner-light.gif";
+
+export default function LogoSpinner() {
+  const { resolvedTheme } = useTheme();
+
+  const logoSrc = resolvedTheme === "dark" ? LogoSpinnerDark : LogoSpinnerLight;
+
+  return (
+    <div className="h-screen w-full flex min-h-[600px] justify-center items-center">
+      <div className="flex items-center justify-center">
+        <Image src={logoSrc} alt="logo" className="w-[82px] h-[82px] mr-2" />
+      </div>
+    </div>
+  );
+}

space/app/page.tsx

@@ -1,20 +1,27 @@
+"use client";
+import { observer } from "mobx-react-lite";
+import useSWR from "swr";
 // components
 import { UserLoggedIn } from "@/components/accounts";
+import { LogoSpinner } from "@/components/common";
 import { AuthView } from "@/components/views";
-// services
-import { UserService } from "@/services/user.service";
+// hooks
+import { useUser } from "@/hooks/store";
 
-const userServices = new UserService();
+function HomePage() {
+  const { fetchCurrentUser, isAuthenticated, isLoading } = useUser();
 
-export default async function HomePage() {
-  const user = await userServices
-    .currentUser()
-    .then((user) => ({ ...user, isAuthenticated: true }))
-    .catch(() => ({ isAuthenticated: false }));
+  useSWR("CURRENT_USER", () => fetchCurrentUser(), { errorRetryCount: 0 });
 
-  if (user.isAuthenticated) {
+  if (isLoading) {
+    return <LogoSpinner />;
+  }
+
+  if (isAuthenticated) {
     return <UserLoggedIn />;
   }
 
   return <AuthView />;
 }
+
+export default observer(HomePage);