From fc36f0bcde7e2dbcc7c6407027eb1b012c1d95ec Mon Sep 17 00:00:00 2001
From: Oliver Walters <oliver.henry.walters@gmail.com>
Date: Thu, 22 Aug 2024 06:24:28 +0000
Subject: [PATCH] Add <YesNoUndefinedButton>

---
 src/frontend/src/components/buttons/YesNoButton.tsx   | 10 +++++++++-
 .../Settings/AccountSettings/AccountDetailPanel.tsx   | 11 ++++++-----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/frontend/src/components/buttons/YesNoButton.tsx b/src/frontend/src/components/buttons/YesNoButton.tsx
index d18b492857..0997bd8ef6 100644
--- a/src/frontend/src/components/buttons/YesNoButton.tsx
+++ b/src/frontend/src/components/buttons/YesNoButton.tsx
@@ -1,5 +1,5 @@
 import { t } from '@lingui/macro';
-import { Badge } from '@mantine/core';
+import { Badge, Skeleton } from '@mantine/core';
 
 import { isTrue } from '../../functions/conversion';
 
@@ -32,3 +32,11 @@ export function PassFailButton({
 export function YesNoButton({ value }: { value: any }) {
   return <PassFailButton value={value} passText={t`Yes`} failText={t`No`} />;
 }
+
+export function YesNoUndefinedButton({ value }: { value?: boolean }) {
+  if (value === undefined) {
+    return <Skeleton height={15} width={32} />;
+  } else {
+    return <YesNoButton value={value} />;
+  }
+}
diff --git a/src/frontend/src/pages/Index/Settings/AccountSettings/AccountDetailPanel.tsx b/src/frontend/src/pages/Index/Settings/AccountSettings/AccountDetailPanel.tsx
index 974391eb6e..520fe55273 100644
--- a/src/frontend/src/pages/Index/Settings/AccountSettings/AccountDetailPanel.tsx
+++ b/src/frontend/src/pages/Index/Settings/AccountSettings/AccountDetailPanel.tsx
@@ -1,9 +1,9 @@
 import { Trans, t } from '@lingui/macro';
-import { ActionIcon, Group, Stack, Table, Title, Tooltip } from '@mantine/core';
-import { IconDots, IconEdit, IconKey, IconUser } from '@tabler/icons-react';
+import { Group, Stack, Table, Title } from '@mantine/core';
+import { IconDots, IconKey, IconUser } from '@tabler/icons-react';
 import { useMemo } from 'react';
 
-import { YesNoButton } from '../../../../components/buttons/YesNoButton';
+import { YesNoUndefinedButton } from '../../../../components/buttons/YesNoButton';
 import { ApiFormFieldSet } from '../../../../components/forms/fields/ApiFormField';
 import { ActionDropdown } from '../../../../components/items/ActionDropdown';
 import { ApiEndpoints } from '../../../../enums/ApiEndpoints';
@@ -59,6 +59,7 @@ export function AccountDetailPanel() {
             ]}
           />
         </Group>
+
         <Table>
           <Table.Tr>
             <Table.Td>
@@ -83,7 +84,7 @@ export function AccountDetailPanel() {
               <Trans>Staff Access</Trans>
             </Table.Td>
             <Table.Td>
-              <YesNoButton value={user?.is_staff} />
+              <YesNoUndefinedButton value={user?.is_staff} />
             </Table.Td>
           </Table.Tr>
           <Table.Tr>
@@ -91,7 +92,7 @@ export function AccountDetailPanel() {
               <Trans>Superuser</Trans>
             </Table.Td>
             <Table.Td>
-              <YesNoButton value={user?.is_superuser} />
+              <YesNoUndefinedButton value={user?.is_superuser} />
             </Table.Td>
           </Table.Tr>
         </Table>