fix: backstage page logical

app/(root)/backstage/layout.tsx

@@ -1,13 +1,14 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
+import { Center, Text } from '@mantine/core';
 import Watermark from '@/app/(root)/backstage/components/Watermark';
 import { Cookie } from '@/components/cookie';
 import Tools from '@/app/(root)/backstage/components/Tools';
 
 export default function BackStageLayout({ children }: { children: React.ReactNode }) {
-    const [userName, setUserName] = useState('');
-    const [userId, setUserId] = useState('');
+    const [userName, setUserName] = useState<string | null>(null);
+    const [userId, setUserId] = useState<string | null>(null);
 
     useEffect(() => {
         if (typeof window !== 'undefined') {
@@ -19,16 +20,26 @@ export default function BackStageLayout({ children }: { children: React.ReactNod
         }
     }, []);
 
+    if (userName === null || userId === null) {
+        return (
+            <Center>
+                <Text>
+                    Loading...
+                </Text>
+            </Center>
+        );
+    }
+
     return (
-        <div>
-            <Watermark
-              text={`${userName} ${userId}`}
-              fontSize={40}
-              gap={200}
-            >
+        <Watermark
+          text={`${userName} ${userId}`}
+          fontSize={40}
+          gap={200}
+        >
+            <>
                 {children}
                 <Tools />
-            </Watermark>
-        </div>
+            </>
+        </Watermark>
     );
 }