画面ロードのアイコンを追加

MurakawaTakuya · Dec 8, 2024 · 94dec82 · 94dec82
1 parent 5e638a7
commit 94dec82
Showing 1 changed file with 13 additions and 1 deletion.
diff --git a/src/Components/TopPage/TopPage.tsx b/src/Components/TopPage/TopPage.tsx
@@ -1,5 +1,6 @@
 "use client";
 import { useUser } from "@/utils/UserContext";
+import CircularProgress from "@mui/joy/CircularProgress";
 import { redirect } from "next/navigation";
 import { ReactNode } from "react";
 
@@ -15,7 +16,18 @@ export const TopPage = ({ children }: TopPageProps) => {
   return (
     <>
       {user === undefined ? (
-        <>ローディングぐるぐるしてるつもり</>
+        <CircularProgress
+          color="primary"
+          variant="soft"
+          size="lg"
+          value={30}
+          sx={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+          }}
+        />
       ) : (
         <main>{children}</main>
       )}