From b842a22236fa653756ceb526d14e0dc5e797aac5 Mon Sep 17 00:00:00 2001
From: Stephen Kent <smkent@smkent.net>
Date: Fri, 25 Nov 2022 22:22:40 -0800
Subject: [PATCH] feat: add loading skeleton to webauthn devices list in
 settings ui (#4406)

---
 .../WebauthnDevices.tsx                       | 81 ++++++++++++-------
 1 file changed, 52 insertions(+), 29 deletions(-)

diff --git a/web/src/views/Settings/TwoFactorAuthentication/WebauthnDevices.tsx b/web/src/views/Settings/TwoFactorAuthentication/WebauthnDevices.tsx
index b6b99d150..f66f45b9c 100644
--- a/web/src/views/Settings/TwoFactorAuthentication/WebauthnDevices.tsx
+++ b/web/src/views/Settings/TwoFactorAuthentication/WebauthnDevices.tsx
@@ -1,6 +1,18 @@
 import React, { useEffect, useState } from "react";
 
-import { Box, Button, Paper, Stack, Table, TableBody, TableCell, TableHead, TableRow, Typography } from "@mui/material";
+import {
+    Box,
+    Button,
+    Paper,
+    Skeleton,
+    Stack,
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableRow,
+    Typography,
+} from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 
@@ -24,6 +36,7 @@ export default function TwoFactorAuthSettings(props: Props) {
     const { createInfoNotification, createErrorNotification } = useNotifications();
     const [webauthnShowDetails, setWebauthnShowDetails] = useState<number>(-1);
     const [registrationInProgress, setRegistrationInProgress] = useState(false);
+    const [ready, setReady] = useState(false);
 
     const [webauthnDevices, setWebauthnDevices] = useState<WebauthnDevice[] | undefined>();
 
@@ -31,6 +44,7 @@ export default function TwoFactorAuthSettings(props: Props) {
         (async function () {
             const devices = await getWebauthnDevices();
             setWebauthnDevices(devices);
+            setReady(true);
         })();
     }, []);
 
@@ -83,34 +97,43 @@ export default function TwoFactorAuthSettings(props: Props) {
                             {"Add new device"}
                         </Button>
                     </Box>
-                    {webauthnDevices ? (
-                        <Box>
-                            <Table>
-                                <TableHead>
-                                    <TableRow>
-                                        <TableCell />
-                                        <TableCell>{translate("Name")}</TableCell>
-                                        <TableCell>{translate("Enabled")}</TableCell>
-                                        <TableCell align="center">{translate("Actions")}</TableCell>
-                                    </TableRow>
-                                </TableHead>
-                                <TableBody>
-                                    {webauthnDevices.map((x, idx) => {
-                                        return (
-                                            <WebauthnDeviceItem
-                                                device={x}
-                                                idx={idx}
-                                                webauthnShowDetails={webauthnShowDetails}
-                                                handleWebAuthnDetailsChange={handleWebAuthnDetailsChange}
-                                                handleDeleteItem={handleDeleteItem}
-                                                key={`webauthn-device-${idx}`}
-                                            />
-                                        );
-                                    })}
-                                </TableBody>
-                            </Table>
-                        </Box>
-                    ) : null}
+                    <Box>
+                        {ready ? (
+                            <>
+                                {webauthnDevices ? (
+                                    <Table>
+                                        <TableHead>
+                                            <TableRow>
+                                                <TableCell />
+                                                <TableCell>{translate("Name")}</TableCell>
+                                                <TableCell>{translate("Enabled")}</TableCell>
+                                                <TableCell align="center">{translate("Actions")}</TableCell>
+                                            </TableRow>
+                                        </TableHead>
+                                        <TableBody>
+                                            {webauthnDevices.map((x, idx) => {
+                                                return (
+                                                    <WebauthnDeviceItem
+                                                        device={x}
+                                                        idx={idx}
+                                                        webauthnShowDetails={webauthnShowDetails}
+                                                        handleWebAuthnDetailsChange={handleWebAuthnDetailsChange}
+                                                        handleDeleteItem={handleDeleteItem}
+                                                        key={`webauthn-device-${idx}`}
+                                                    />
+                                                );
+                                            })}
+                                        </TableBody>
+                                    </Table>
+                                ) : null}
+                            </>
+                        ) : (
+                            <>
+                                <Skeleton height={20} />
+                                <Skeleton height={40} />
+                            </>
+                        )}
+                    </Box>
                 </Stack>
             </Box>
         </Paper>