add skeletons

stack-auth · Feb 7, 2025 · c89a853 · c89a853
1 parent 68f85e1
commit c89a853
Showing 1 changed file with 11 additions and 2 deletions.
diff --git a/packages/stack/src/components-page/account-settings.tsx b/packages/stack/src/components-page/account-settings.tsx
@@ -8,7 +8,7 @@ import { passwordSchema as schemaFieldsPasswordSchema, strictEmailSchema, yupObj
 import { generateRandomValues } from '@stackframe/stack-shared/dist/utils/crypto';
 import { throwErr } from '@stackframe/stack-shared/dist/utils/errors';
 import { runAsynchronously, runAsynchronouslyWithAlert } from '@stackframe/stack-shared/dist/utils/promises';
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActionCell, Badge, Button, Input, Label, PasswordInput, Separator, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Typography } from '@stackframe/stack-ui';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActionCell, Badge, Button, Input, Label, PasswordInput, Separator, Skeleton, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Typography } from '@stackframe/stack-ui';
 import { Edit, Trash, icons } from 'lucide-react';
 import { useRouter } from "next/navigation";
 import { TOTPController, createTOTPKeyURI } from "oslo/otp";
@@ -65,7 +65,7 @@ export function AccountSettings(props: {
               type: 'item',
               id: 'auth',
               icon: <Icon name="ShieldCheck"/>,
-              content: <Suspense>
+              content: <Suspense fallback={<EmailsAndAuthPageSkeleton/>}>
                 <EmailsAndAuthPage/>
               </Suspense>,
             },
@@ -370,6 +370,15 @@ function EmailsAndAuthPage() {
   );
 }
 
+function EmailsAndAuthPageSkeleton() {
+  return <PageLayout>
+    <Skeleton className="h-9 w-full mt-1"/>
+    <Skeleton className="h-9 w-full mt-1"/>
+    <Skeleton className="h-9 w-full mt-1"/>
+    <Skeleton className="h-9 w-full mt-1"/>
+  </PageLayout>;
+}
+
 
 function usePasskeySection() {
   const { t } = useTranslation();