Improve management page loading states

webapp/src/components/AdminPage.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'preact/hooks';
 import { ChevronLeft, ChevronRight, Clipboard, Plus, RefreshCw, Trash2, UserCheck, UserX } from 'lucide-preact';
 import { copyTextToClipboard } from '@/lib/clipboard';
+import LoadingState from '@/components/LoadingState';
 import type { AdminInvite, AdminUser } from '@/lib/types';
 import { t } from '@/lib/i18n';
 
@@ -8,6 +9,8 @@ interface AdminPageProps {
   currentUserId: string;
   users: AdminUser[];
   invites: AdminInvite[];
+  loading: boolean;
+  error: string;
   onRefresh: () => void;
   onCreateInvite: (hours: number) => Promise<void>;
   onDeleteAllInvites: () => Promise<void>;
@@ -48,8 +51,22 @@ export default function AdminPage(props: AdminPageProps) {
 
   return (
     <div className="stack">
+      {!!props.error && (
+        <div className="local-error">
+          <span>{props.error}</span>
+          <button type="button" className="btn btn-secondary small" onClick={props.onRefresh}>
+            <RefreshCw size={14} className="btn-icon" />
+            {t('txt_refresh')}
+          </button>
+        </div>
+      )}
       <section className="card">
+        <div className="section-head">
           <h3>{t('txt_users')}</h3>
+          <button type="button" className="btn btn-secondary small" disabled={props.loading} onClick={props.onRefresh}>
+            <RefreshCw size={14} className="btn-icon" /> {t('txt_refresh')}
+          </button>
+        </div>
         <table className="table">
           <thead>
             <tr>
@@ -94,6 +111,20 @@ export default function AdminPage(props: AdminPageProps) {
                 </tr>
               );
             })}
+            {props.loading && !props.users.length && (
+              <tr>
+                <td colSpan={5}>
+                  <LoadingState lines={4} compact />
+                </td>
+              </tr>
+            )}
+            {!props.loading && !props.users.length && (
+              <tr>
+                <td colSpan={5}>
+                  <div className="empty empty-comfortable">{t('txt_no_users_found')}</div>
+                </td>
+              </tr>
+            )}
           </tbody>
         </table>
       </section>
@@ -101,7 +132,7 @@ export default function AdminPage(props: AdminPageProps) {
       <section className="card">
         <div className="section-head">
           <h3>{t('txt_invites')}</h3>
-          <button type="button" className="btn btn-secondary" onClick={props.onRefresh}>
+          <button type="button" className="btn btn-secondary" disabled={props.loading} onClick={props.onRefresh}>
             <RefreshCw size={14} className="btn-icon" /> {t('txt_sync')}
           </button>
         </div>
@@ -160,6 +191,20 @@ export default function AdminPage(props: AdminPageProps) {
                 </td>
               </tr>
             ))}
+            {props.loading && !props.invites.length && (
+              <tr>
+                <td colSpan={4}>
+                  <LoadingState lines={4} compact />
+                </td>
+              </tr>
+            )}
+            {!props.loading && !props.invites.length && (
+              <tr>
+                <td colSpan={4}>
+                  <div className="empty empty-comfortable">{t('txt_no_invites_found')}</div>
+                </td>
+              </tr>
+            )}
           </tbody>
         </table>
         <div className="actions">

webapp/src/components/SecurityDevicesPage.tsx

@@ -1,12 +1,14 @@
 import { useState } from 'preact/hooks';
 import { Clock3, Pencil, RefreshCw, ShieldOff, Trash2 } from 'lucide-preact';
 import ConfirmDialog from '@/components/ConfirmDialog';
+import LoadingState from '@/components/LoadingState';
 import type { AuthorizedDevice } from '@/lib/types';
 import { t } from '@/lib/i18n';
 
 interface SecurityDevicesPageProps {
   devices: AuthorizedDevice[];
   loading: boolean;
+  error: string;
   onRefresh: () => void;
   onRenameDevice: (device: AuthorizedDevice, name: string) => Promise<void>;
   onRevokeTrust: (device: AuthorizedDevice) => void;
@@ -72,7 +74,7 @@ export default function SecurityDevicesPage(props: SecurityDevicesPageProps) {
             </div>
           </div>
           <div className="actions">
-            <button type="button" className="btn btn-secondary small" onClick={props.onRefresh}>
+            <button type="button" className="btn btn-secondary small" disabled={props.loading} onClick={props.onRefresh}>
               <RefreshCw size={14} className="btn-icon" />
               {t('txt_refresh')}
             </button>
@@ -90,6 +92,15 @@ export default function SecurityDevicesPage(props: SecurityDevicesPageProps) {
 
         <section className="card">
         <h3 className="section-title-flush">{t('txt_authorized_devices')}</h3>
+        {!!props.error && (
+          <div className="local-error">
+            <span>{props.error}</span>
+            <button type="button" className="btn btn-secondary small" disabled={props.loading} onClick={props.onRefresh}>
+              <RefreshCw size={14} className="btn-icon" />
+              {t('txt_refresh')}
+            </button>
+          </div>
+        )}
         <table className="table">
           <thead>
             <tr>
@@ -166,6 +177,13 @@ export default function SecurityDevicesPage(props: SecurityDevicesPageProps) {
                 </td>
               </tr>
             ))}
+            {props.loading && props.devices.length === 0 && (
+              <tr>
+                <td colSpan={7}>
+                  <LoadingState lines={5} compact />
+                </td>
+              </tr>
+            )}
             {!props.loading && props.devices.length === 0 && (
               <tr>
                 <td colSpan={7}>

webapp/src/hooks/useAdminActions.ts

@@ -20,26 +20,39 @@ export default function useAdminActions(options: UseAdminActionsOptions) {
   return useMemo(
     () => ({
       refreshAdmin() {
-        void refetchUsers();
+        void Promise.all([refetchUsers(), refetchInvites()]).catch((error) => {
-        void refetchInvites();
+          onNotify('error', error instanceof Error ? error.message : t('txt_load_admin_data_failed'));
+        });
       },
 
       async createInvite(hours: number) {
+        try {
           await createInvite(authedFetch, hours);
           await refetchInvites();
           onNotify('success', t('txt_invite_created'));
+        } catch (error) {
+          onNotify('error', error instanceof Error ? error.message : t('txt_create_invite_failed'));
+        }
       },
 
       async toggleUserStatus(userId: string, status: 'active' | 'banned') {
+        try {
           await setUserStatus(authedFetch, userId, status === 'active' ? 'banned' : 'active');
           await refetchUsers();
           onNotify('success', t('txt_user_status_updated'));
+        } catch (error) {
+          onNotify('error', error instanceof Error ? error.message : t('txt_update_user_status_failed'));
+        }
       },
 
       async revokeInvite(code: string) {
+        try {
           await revokeInvite(authedFetch, code);
           await refetchInvites();
           onNotify('success', t('txt_invite_revoked'));
+        } catch (error) {
+          onNotify('error', error instanceof Error ? error.message : t('txt_revoke_invite_failed'));
+        }
       },
 
       async deleteAllInvites() {
@@ -50,9 +63,13 @@ export default function useAdminActions(options: UseAdminActionsOptions) {
           onConfirm: () => {
             onSetConfirm(null);
             void (async () => {
+              try {
                 await deleteAllInvites(authedFetch);
                 await refetchInvites();
                 onNotify('success', t('txt_all_invites_deleted'));
+              } catch (error) {
+                onNotify('error', error instanceof Error ? error.message : t('txt_delete_all_invites_failed'));
+              }
             })();
           },
         });
@@ -66,9 +83,13 @@ export default function useAdminActions(options: UseAdminActionsOptions) {
           onConfirm: () => {
             onSetConfirm(null);
             void (async () => {
+              try {
                 await deleteUser(authedFetch, userId);
                 await refetchUsers();
                 onNotify('success', t('txt_user_deleted'));
+              } catch (error) {
+                onNotify('error', error instanceof Error ? error.message : t('txt_delete_user_failed'));
+              }
             })();
           },
         });

webapp/src/styles/management.css

@@ -698,7 +698,7 @@
 }
 
 .local-error {
-  @apply mt-2.5 font-semibold;
+  @apply mt-2.5 flex flex-wrap items-center gap-2 font-semibold;
   color: #b42318;
 }