diff --git a/warpgate-web/eslint.config.mjs b/warpgate-web/eslint.config.mjs
index d17afdda..c4277bbc 100644
--- a/warpgate-web/eslint.config.mjs
+++ b/warpgate-web/eslint.config.mjs
@@ -29,6 +29,7 @@ export default [
       },
       globals: {
           ...globals.browser,
+          T: false,
       },
     },
     rules: {
diff --git a/warpgate-web/src/admin/App.svelte b/warpgate-web/src/admin/App.svelte
index cfcf9bdb..4a84a8e5 100644
--- a/warpgate-web/src/admin/App.svelte
+++ b/warpgate-web/src/admin/App.svelte
@@ -1,81 +1,79 @@
 <script lang="ts">
-import { serverInfo, reloadServerInfo } from 'gateway/lib/store'
+    import { serverInfo, reloadServerInfo } from 'gateway/lib/store'
 
-import Router, { link } from 'svelte-spa-router'
-import active from 'svelte-spa-router/active'
-import { wrap } from 'svelte-spa-router/wrap'
-import ThemeSwitcher from 'common/ThemeSwitcher.svelte'
-import DelayedSpinner from 'common/DelayedSpinner.svelte'
-import AuthBar from 'common/AuthBar.svelte'
-import Brand from 'common/Brand.svelte'
+    import Router, { link } from 'svelte-spa-router'
+    import active from 'svelte-spa-router/active'
+    import { wrap } from 'svelte-spa-router/wrap'
+    import ThemeSwitcher from 'common/ThemeSwitcher.svelte'
+    import AuthBar from 'common/AuthBar.svelte'
+    import Brand from 'common/Brand.svelte'
+    import Loadable from 'common/Loadable.svelte'
 
-async function init () {
-    await reloadServerInfo()
-}
+    async function init () {
+        await reloadServerInfo()
+    }
 
-init()
+    const initPromise = init()
 
-const routes = {
-    '/': wrap({
-        asyncComponent: () => import('./Home.svelte') as any,
-    }),
-    '/sessions/:id': wrap({
-        asyncComponent: () => import('./Session.svelte') as any,
-    }),
-    '/recordings/:id': wrap({
-        asyncComponent: () => import('./Recording.svelte') as any,
-    }),
-    '/targets/create': wrap({
-        asyncComponent: () => import('./CreateTarget.svelte') as any,
-    }),
-    '/targets/:id': wrap({
-        asyncComponent: () => import('./Target.svelte') as any,
-    }),
-    '/roles/create': wrap({
-        asyncComponent: () => import('./CreateRole.svelte') as any,
-    }),
-    '/roles/:id': wrap({
-        asyncComponent: () => import('./Role.svelte') as any,
-    }),
-    '/users/create': wrap({
-        asyncComponent: () => import('./CreateUser.svelte') as any,
-    }),
-    '/users/:id': wrap({
-        asyncComponent: () => import('./User.svelte') as any,
-    }),
-    '/log': wrap({
-        asyncComponent: () => import('./Log.svelte') as any,
-    }),
-    '/config': wrap({
-        asyncComponent: () => import('./config/Config.svelte') as any,
-    }),
-    '/config/parameters': wrap({
-        asyncComponent: () => import('./config/Parameters.svelte') as any,
-    }),
-    '/config/users': wrap({
-        asyncComponent: () => import('./config/Users.svelte') as any,
-    }),
-    '/config/roles': wrap({
-        asyncComponent: () => import('./config/Roles.svelte') as any,
-    }),
-    '/config/targets': wrap({
-        asyncComponent: () => import('./config/Targets.svelte') as any,
-    }),
-    '/config/ssh': wrap({
-        asyncComponent: () => import('./config/SSHKeys.svelte') as any,
-    }),
-    '/config/tickets': wrap({
-        asyncComponent: () => import('./config/Tickets.svelte') as any,
-    }),
-    '/config/tickets/create': wrap({
-        asyncComponent: () => import('./CreateTicket.svelte') as any,
-    }),
-}
+    const routes = {
+        '/': wrap({
+            asyncComponent: () => import('./Home.svelte') as any,
+        }),
+        '/sessions/:id': wrap({
+            asyncComponent: () => import('./Session.svelte') as any,
+        }),
+        '/recordings/:id': wrap({
+            asyncComponent: () => import('./Recording.svelte') as any,
+        }),
+        '/targets/create': wrap({
+            asyncComponent: () => import('./CreateTarget.svelte') as any,
+        }),
+        '/targets/:id': wrap({
+            asyncComponent: () => import('./Target.svelte') as any,
+        }),
+        '/roles/create': wrap({
+            asyncComponent: () => import('./CreateRole.svelte') as any,
+        }),
+        '/roles/:id': wrap({
+            asyncComponent: () => import('./Role.svelte') as any,
+        }),
+        '/users/create': wrap({
+            asyncComponent: () => import('./CreateUser.svelte') as any,
+        }),
+        '/users/:id': wrap({
+            asyncComponent: () => import('./User.svelte') as any,
+        }),
+        '/log': wrap({
+            asyncComponent: () => import('./Log.svelte') as any,
+        }),
+        '/config': wrap({
+            asyncComponent: () => import('./config/Config.svelte') as any,
+        }),
+        '/config/parameters': wrap({
+            asyncComponent: () => import('./config/Parameters.svelte') as any,
+        }),
+        '/config/users': wrap({
+            asyncComponent: () => import('./config/Users.svelte') as any,
+        }),
+        '/config/roles': wrap({
+            asyncComponent: () => import('./config/Roles.svelte') as any,
+        }),
+        '/config/targets': wrap({
+            asyncComponent: () => import('./config/Targets.svelte') as any,
+        }),
+        '/config/ssh': wrap({
+            asyncComponent: () => import('./config/SSHKeys.svelte') as any,
+        }),
+        '/config/tickets': wrap({
+            asyncComponent: () => import('./config/Tickets.svelte') as any,
+        }),
+        '/config/tickets/create': wrap({
+            asyncComponent: () => import('./CreateTicket.svelte') as any,
+        }),
+    }
 </script>
 
-{#await init()}
-    <DelayedSpinner />
-{:then}
+<Loadable promise={initPromise}>
     <div class="app container">
         <header>
             <a href="/@warpgate" class="d-flex logo-link me-4">
@@ -100,7 +98,7 @@ const routes = {
             <ThemeSwitcher />
         </footer>
     </div>
-{/await}
+</Loadable>
 
 <style lang="scss">
     @media (max-width: 767px) {
diff --git a/warpgate-web/src/admin/CredentialEditor.svelte b/warpgate-web/src/admin/CredentialEditor.svelte
index 1cd09db7..20786e58 100644
--- a/warpgate-web/src/admin/CredentialEditor.svelte
+++ b/warpgate-web/src/admin/CredentialEditor.svelte
@@ -9,11 +9,8 @@
 <script lang="ts">
     import { faIdBadge, faKey, faKeyboard, faMobileScreen } from '@fortawesome/free-solid-svg-icons'
     import { api, CredentialKind, type ExistingPasswordCredential, type ExistingPublicKeyCredential, type ExistingSsoCredential, type ExistingOtpCredential, type UserRequireCredentialsPolicy } from 'admin/lib/api'
-    import DelayedSpinner from 'common/DelayedSpinner.svelte'
     import Fa from 'svelte-fa'
     import { Button } from '@sveltestrap/sveltestrap'
-    import { stringifyError } from 'common/errors'
-    import Alert from 'common/sveltestrap-s5-ports/Alert.svelte'
     import CreatePasswordModal from './CreatePasswordModal.svelte'
     import SsoCredentialModal from './SsoCredentialModal.svelte'
     import PublicKeyCredentialModal from './PublicKeyCredentialModal.svelte'
@@ -21,6 +18,7 @@
     import AuthPolicyEditor from './AuthPolicyEditor.svelte'
     import { possibleCredentials } from 'common/protocols'
     import CredentialUsedStateBadge from 'common/CredentialUsedStateBadge.svelte'
+    import Loadable from 'common/Loadable.svelte'
 
     interface Props {
         userId: string
@@ -29,7 +27,6 @@
     }
     let { userId, username, credentialPolicy = $bindable() }: Props = $props()
 
-    let error: string|null = $state(null)
     let credentials: ExistingCredential[] = $state([])
 
     let creatingPassword = $state(false)
@@ -49,16 +46,12 @@
     ]
 
     async function load () {
-        try {
-            await Promise.all([
-                loadPasswords(),
-                loadSso(),
-                loadPublicKeys(),
-                loadOtp(),
-            ])
-        } catch (err) {
-            error = await stringifyError(err)
-        }
+        await Promise.all([
+            loadPasswords(),
+            loadSso(),
+            loadPublicKeys(),
+            loadOtp(),
+        ])
     }
 
     async function loadPasswords () {
@@ -240,97 +233,89 @@
     }}>Add SSO</Button>
 </div>
 
-{#await loadPromise}
-<DelayedSpinner />
-{:then}
-
-<div class="list-group list-group-flush mb-3">
-    {#each credentials as credential}
-    <div class="list-group-item credential">
-        {#if credential.kind === CredentialKind.Password }
-            <Fa fw icon={faKeyboard} />
-            <span class="label me-auto">Password</span>
-        {/if}
-        {#if credential.kind === 'PublicKey'}
-            <Fa fw icon={faKey} />
-            <div class="main me-auto">
-                <div class="label d-flex align-items-center">
-                    {credential.label}
+<Loadable promise={loadPromise}>
+    <div class="list-group list-group-flush mb-3">
+        {#each credentials as credential}
+        <div class="list-group-item credential">
+            {#if credential.kind === CredentialKind.Password }
+                <Fa fw icon={faKeyboard} />
+                <span class="label me-auto">Password</span>
+            {/if}
+            {#if credential.kind === 'PublicKey'}
+                <Fa fw icon={faKey} />
+                <div class="main me-auto">
+                    <div class="label d-flex align-items-center">
+                        {credential.label}
+                    </div>
+                    <small class="d-block text-muted">{abbreviatePublicKey(credential.opensshPublicKey)}</small>
                 </div>
-                <small class="d-block text-muted">{abbreviatePublicKey(credential.opensshPublicKey)}</small>
-            </div>
-            <CredentialUsedStateBadge credential={credential} />
-            <div class="me-2"></div>
-        {/if}
-        {#if credential.kind === 'Totp'}
-            <Fa fw icon={faMobileScreen} />
-            <span class="label me-auto">One-time password</span>
-        {/if}
-        {#if credential.kind === CredentialKind.Sso}
-            <Fa fw icon={faIdBadge} />
-            <span class="label">Single sign-on</span>
-            <span class="text-muted ms-2 me-auto">
-                {credential.email}
-                {#if credential.provider} ({credential.provider}){/if}
-            </span>
-        {/if}
-
-        {#if credential.kind === CredentialKind.PublicKey || credential.kind === CredentialKind.Sso}
-        <a
-            class="ms-2"
-            href={''}
-            onclick={e => {
-                if (credential.kind === CredentialKind.Sso) {
-                    editingSsoCredentialInstance = credential
-                    editingSsoCredential = true
-                }
-                if (credential.kind === CredentialKind.PublicKey) {
-                    editingPublicKeyCredentialInstance = credential
-                    editingPublicKeyCredential = true
-                }
-                e.preventDefault()
-            }}>
-            Change
-        </a>
-        {/if}
-        <a
-            class="ms-2"
-            href={''}
-            onclick={e => {
-                deleteCredential(credential)
-                e.preventDefault()
-            }}>
-            Delete
-        </a>
+                <CredentialUsedStateBadge credential={credential} />
+                <div class="me-2"></div>
+            {/if}
+            {#if credential.kind === 'Totp'}
+                <Fa fw icon={faMobileScreen} />
+                <span class="label me-auto">One-time password</span>
+            {/if}
+            {#if credential.kind === CredentialKind.Sso}
+                <Fa fw icon={faIdBadge} />
+                <span class="label">Single sign-on</span>
+                <span class="text-muted ms-2 me-auto">
+                    {credential.email}
+                    {#if credential.provider} ({credential.provider}){/if}
+                </span>
+            {/if}
+
+            {#if credential.kind === CredentialKind.PublicKey || credential.kind === CredentialKind.Sso}
+            <a
+                class="ms-2"
+                href={''}
+                onclick={e => {
+                    if (credential.kind === CredentialKind.Sso) {
+                        editingSsoCredentialInstance = credential
+                        editingSsoCredential = true
+                    }
+                    if (credential.kind === CredentialKind.PublicKey) {
+                        editingPublicKeyCredentialInstance = credential
+                        editingPublicKeyCredential = true
+                    }
+                    e.preventDefault()
+                }}>
+                Change
+            </a>
+            {/if}
+            <a
+                class="ms-2"
+                href={''}
+                onclick={e => {
+                    deleteCredential(credential)
+                    e.preventDefault()
+                }}>
+                Delete
+            </a>
+        </div>
+        {/each}
     </div>
-    {/each}
-</div>
 
-<h4>Auth policy</h4>
-<div class="list-group list-group-flush mb-3">
-    {#each policyProtocols as protocol}
-    <div class="list-group-item">
-        <div>
-            <strong>{protocol.name}</strong>
+    <h4>Auth policy</h4>
+    <div class="list-group list-group-flush mb-3">
+        {#each policyProtocols as protocol}
+        <div class="list-group-item">
+            <div>
+                <strong>{protocol.name}</strong>
+            </div>
+            {#if possibleCredentials[protocol.id]}
+                {@const _possibleCredentials = assertDefined(possibleCredentials[protocol.id])}
+                <AuthPolicyEditor
+                    bind:value={credentialPolicy}
+                    existingCredentials={credentials}
+                    possibleCredentials={_possibleCredentials}
+                    protocolId={protocol.id}
+                />
+            {/if}
         </div>
-        {#if possibleCredentials[protocol.id]}
-            {@const _possibleCredentials = assertDefined(possibleCredentials[protocol.id])}
-            <AuthPolicyEditor
-                bind:value={credentialPolicy}
-                existingCredentials={credentials}
-                possibleCredentials={_possibleCredentials}
-                protocolId={protocol.id}
-            />
-        {/if}
+        {/each}
     </div>
-    {/each}
-</div>
-
-{/await}
-
-{#if error}
-    <Alert color="danger">{error}</Alert>
-{/if}
+</Loadable>
 
 {#if creatingPassword}
 <CreatePasswordModal
diff --git a/warpgate-web/src/admin/Role.svelte b/warpgate-web/src/admin/Role.svelte
index 05940532..bef073bf 100644
--- a/warpgate-web/src/admin/Role.svelte
+++ b/warpgate-web/src/admin/Role.svelte
@@ -1,51 +1,46 @@
 <script lang="ts">
-import { api, type Role } from 'admin/lib/api'
-import AsyncButton from 'common/AsyncButton.svelte'
-import DelayedSpinner from 'common/DelayedSpinner.svelte'
-import { replace } from 'svelte-spa-router'
-import { FormGroup } from '@sveltestrap/sveltestrap'
-import { stringifyError } from 'common/errors'
-import Alert from 'common/sveltestrap-s5-ports/Alert.svelte'
+    import { api, type Role } from 'admin/lib/api'
+    import AsyncButton from 'common/AsyncButton.svelte'
+    import { replace } from 'svelte-spa-router'
+    import { FormGroup } from '@sveltestrap/sveltestrap'
+    import { stringifyError } from 'common/errors'
+    import Alert from 'common/sveltestrap-s5-ports/Alert.svelte'
+    import Loadable from 'common/Loadable.svelte'
 
-interface Props {
-    params: { id: string };
-}
+    interface Props {
+        params: { id: string };
+    }
 
-let { params }: Props = $props()
+    let { params }: Props = $props()
 
-let error: string|null = $state(null)
-let role: Role | undefined = $state()
+    let error: string|null = $state(null)
+    let role: Role | undefined = $state()
+    const initPromise = init()
 
-async function load () {
-    try {
+    async function init () {
         role = await api.getRole({ id: params.id })
-    } catch (err) {
-        error = await stringifyError(err)
     }
-}
 
-async function update () {
-    try {
-        role = await api.updateRole({
-            id: params.id,
-            roleDataRequest: role!,
-        })
-    } catch (err) {
-        error = await stringifyError(err)
+    async function update () {
+        try {
+            role = await api.updateRole({
+                id: params.id,
+                roleDataRequest: role!,
+            })
+        } catch (err) {
+            error = await stringifyError(err)
+        }
     }
-}
 
-async function remove () {
-    if (confirm(`Delete role ${role!.name}?`)) {
-        await api.deleteRole(role!)
-        replace('/config/roles')
+    async function remove () {
+        if (confirm(`Delete role ${role!.name}?`)) {
+            await api.deleteRole(role!)
+            replace('/config/roles')
+        }
     }
-}
 </script>
 
-{#await load()}
-    <DelayedSpinner />
-{:then}
+<Loadable promise={initPromise}>
     <div class="page-summary-bar">
         <div>
             <h1>{role!.name}</h1>
@@ -56,7 +51,7 @@ async function remove () {
     <FormGroup floating label="Name">
         <input class="form-control" bind:value={role!.name} />
     </FormGroup>
-{/await}
+</Loadable>
 
 {#if error}
     <Alert color="danger">{error}</Alert>
diff --git a/warpgate-web/src/admin/SsoCredentialModal.svelte b/warpgate-web/src/admin/SsoCredentialModal.svelte
index 1f344adc..acca253e 100644
--- a/warpgate-web/src/admin/SsoCredentialModal.svelte
+++ b/warpgate-web/src/admin/SsoCredentialModal.svelte
@@ -13,6 +13,7 @@
     import { type ExistingSsoCredential } from './lib/api'
     import { api } from 'gateway/lib/api'
     import Alert from 'common/sveltestrap-s5-ports/Alert.svelte'
+    import Loadable from 'common/Loadable.svelte'
 
     interface Props {
         isOpen: boolean
@@ -64,24 +65,26 @@
                     bind:value={email} />
             </FormGroup>
 
-            {#await api.getSsoProviders() then providers}
-                {#if !providers.length}
+            <Loadable promise={api.getSsoProviders()}>
+                {#snippet children(providers)}
+                    {#if !providers.length}
                     <Alert color="warning">
                         You don't have any SSO providers configured. Add them to your config file first.
                     </Alert>
-                {/if}
-                <FormGroup floating label="SSO provider">
-                    <Input
-                        bind:value={provider}
-                        type="select"
-                    >
-                        <option value={null} selected>Any</option>
-                        {#each providers as provider}
+                    {/if}
+                    <FormGroup floating label="SSO provider">
+                        <Input
+                            bind:value={provider}
+                            type="select"
+                        >
+                            <option value={null} selected>Any</option>
+                            {#each providers as provider}
                             <option value={provider.name}>{provider.label ?? provider.name}</option>
-                        {/each}
-                    </Input>
-                </FormGroup>
-            {/await}
+                            {/each}
+                        </Input>
+                    </FormGroup>
+                {/snippet}
+            </Loadable>
         </ModalBody>
         <ModalFooter>
             <div class="d-flex">
diff --git a/warpgate-web/src/admin/Target.svelte b/warpgate-web/src/admin/Target.svelte
index 42150747..4e3437fd 100644
--- a/warpgate-web/src/admin/Target.svelte
+++ b/warpgate-web/src/admin/Target.svelte
@@ -1,85 +1,79 @@
 <script lang="ts">
-import { faExternalLink } from '@fortawesome/free-solid-svg-icons'
-import { api, type Role, type Target, type User } from 'admin/lib/api'
-import AsyncButton from 'common/AsyncButton.svelte'
-import ConnectionInstructions from 'common/ConnectionInstructions.svelte'
-import DelayedSpinner from 'common/DelayedSpinner.svelte'
-import { TargetKind } from 'gateway/lib/api'
-import { serverInfo } from 'gateway/lib/store'
-import Fa from 'svelte-fa'
-import { replace } from 'svelte-spa-router'
-import { FormGroup, Input } from '@sveltestrap/sveltestrap'
-import TlsConfiguration from './TlsConfiguration.svelte'
-import { stringifyError } from 'common/errors'
-import Alert from 'common/sveltestrap-s5-ports/Alert.svelte'
+    import { faExternalLink } from '@fortawesome/free-solid-svg-icons'
+    import { api, type Role, type Target, type User } from 'admin/lib/api'
+    import AsyncButton from 'common/AsyncButton.svelte'
+    import ConnectionInstructions from 'common/ConnectionInstructions.svelte'
+    import { TargetKind } from 'gateway/lib/api'
+    import { serverInfo } from 'gateway/lib/store'
+    import Fa from 'svelte-fa'
+    import { replace } from 'svelte-spa-router'
+    import { FormGroup, Input } from '@sveltestrap/sveltestrap'
+    import TlsConfiguration from './TlsConfiguration.svelte'
+    import { stringifyError } from 'common/errors'
+    import Alert from 'common/sveltestrap-s5-ports/Alert.svelte'
+    import Loadable from 'common/Loadable.svelte'
 
-interface Props {
-    params: { id: string };
-}
+    interface Props {
+        params: { id: string };
+    }
 
-let { params }: Props = $props()
+    let { params }: Props = $props()
 
-let error: string|undefined = $state()
-let selectedUser: User|undefined = $state()
-let target: Target | undefined = $state()
-let allRoles: Role[] = $state([])
-let roleIsAllowed: Record<string, any> = $state({})
+    let error: string|undefined = $state()
+    let selectedUser: User|undefined = $state()
+    let target: Target | undefined = $state()
+    let roleIsAllowed: Record<string, any> = $state({})
 
-async function load () {
-    try {
+    async function init () {
         target = await api.getTarget({ id: params.id })
-    } catch (err) {
-        error = await stringifyError(err)
     }
-}
 
-async function loadRoles () {
-    allRoles = await api.getRoles()
-    const allowedRoles = await api.getTargetRoles(target!)
-    roleIsAllowed = Object.fromEntries(allowedRoles.map(r => [r.id, true]))
-}
+    async function loadRoles () {
+        const allRoles = await api.getRoles()
+        const allowedRoles = await api.getTargetRoles(target!)
+        roleIsAllowed = Object.fromEntries(allowedRoles.map(r => [r.id, true]))
+        return allRoles
+    }
 
-async function update () {
-    try {
-        if (target!.options.kind === 'Http') {
-            target!.options.externalHost = target!.options.externalHost || undefined
+    async function update () {
+        try {
+            if (target!.options.kind === 'Http') {
+                target!.options.externalHost = target!.options.externalHost || undefined
+            }
+            target = await api.updateTarget({
+                id: params.id,
+                targetDataRequest: target!,
+            })
+        } catch (err) {
+            error = await stringifyError(err)
         }
-        target = await api.updateTarget({
-            id: params.id,
-            targetDataRequest: target!,
-        })
-    } catch (err) {
-        error = await stringifyError(err)
     }
-}
 
-async function remove () {
-    if (confirm(`Delete target ${target!.name}?`)) {
-        await api.deleteTarget(target!)
-        replace('/config/targets')
+    async function remove () {
+        if (confirm(`Delete target ${target!.name}?`)) {
+            await api.deleteTarget(target!)
+            replace('/config/targets')
+        }
     }
-}
 
-async function toggleRole (role: Role) {
-    if (roleIsAllowed[role.id]) {
-        await api.deleteTargetRole({
-            id: target!.id,
-            roleId: role.id,
-        })
-        roleIsAllowed = { ...roleIsAllowed, [role.id]: false }
-    } else {
-        await api.addTargetRole({
-            id: target!.id,
-            roleId: role.id,
-        })
-        roleIsAllowed = { ...roleIsAllowed, [role.id]: true }
+    async function toggleRole (role: Role) {
+        if (roleIsAllowed[role.id]) {
+            await api.deleteTargetRole({
+                id: target!.id,
+                roleId: role.id,
+            })
+            roleIsAllowed = { ...roleIsAllowed, [role.id]: false }
+        } else {
+            await api.addTargetRole({
+                id: target!.id,
+                roleId: role.id,
+            })
+            roleIsAllowed = { ...roleIsAllowed, [role.id]: true }
+        }
     }
-}
 </script>
 
-{#await load()}
-    <DelayedSpinner />
-{:then}
+<Loadable promise={init()}>
 {#if target}
     <div class="page-summary-bar">
         <div>
@@ -107,21 +101,19 @@ async function toggleRole (role: Role) {
     <h4>Access instructions</h4>
 
     {#if target.options.kind === 'Ssh' || target.options.kind === 'MySql' || target.options.kind === 'Postgres'}
-        {#await api.getUsers()}
-            <DelayedSpinner/>
-        {:then users}
-            <FormGroup floating label="Select a user">
-                <select bind:value={selectedUser} class="form-control">
-                    {#each users as user}
-                        <option value={user}>
-                            {user.username}
-                        </option>
-                    {/each}
-                </select>
-            </FormGroup>
-        {:catch _error}
-            <Alert color="danger">{_error}</Alert>
-        {/await}
+        <Loadable promise={api.getUsers()}>
+            {#snippet children(users)}
+                <FormGroup floating label="Select a user">
+                    <select bind:value={selectedUser} class="form-control">
+                        {#each users as user}
+                            <option value={user}>
+                                {user.username}
+                            </option>
+                        {/each}
+                    </select>
+                </FormGroup>
+            {/snippet}
+        </Loadable>
     {/if}
 
     <ConnectionInstructions
@@ -241,26 +233,28 @@ async function toggleRole (role: Role) {
     {/if}
 
     <h4 class="mt-4">Allow access for roles</h4>
-    {#await loadRoles() then}
-        <div class="list-group list-group-flush mb-3">
-            {#each allRoles as role}
-                <label
-                    for="role-{role.id}"
-                    class="list-group-item list-group-item-action d-flex align-items-center"
-                >
-                    <Input
-                        id="role-{role.id}"
-                        class="mb-0 me-2"
-                        type="switch"
-                        on:change={() => toggleRole(role)}
-                        checked={roleIsAllowed[role.id]} />
-                    <div>{role.name}</div>
-                </label>
-            {/each}
-        </div>
-    {/await}
+    <Loadable promise={loadRoles()}>
+        {#snippet children(roles)}
+            <div class="list-group list-group-flush mb-3">
+                {#each roles as role}
+                    <label
+                        for="role-{role.id}"
+                        class="list-group-item list-group-item-action d-flex align-items-center"
+                    >
+                        <Input
+                            id="role-{role.id}"
+                            class="mb-0 me-2"
+                            type="switch"
+                            on:change={() => toggleRole(role)}
+                            checked={roleIsAllowed[role.id]} />
+                        <div>{role.name}</div>
+                    </label>
+                {/each}
+            </div>
+        {/snippet}
+    </Loadable>
 {/if}
-{/await}
+</Loadable>
 
 {#if error}
     <Alert color="danger">{error}</Alert>
diff --git a/warpgate-web/src/admin/User.svelte b/warpgate-web/src/admin/User.svelte
index fd1b3769..3c29c634 100644
--- a/warpgate-web/src/admin/User.svelte
+++ b/warpgate-web/src/admin/User.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
     import { api, type Role, type User } from 'admin/lib/api'
     import AsyncButton from 'common/AsyncButton.svelte'
-    import DelayedSpinner from 'common/DelayedSpinner.svelte'
     import { replace } from 'svelte-spa-router'
     import { FormGroup, Input } from '@sveltestrap/sveltestrap'
     import { stringifyError } from 'common/errors'
     import Alert from 'common/sveltestrap-s5-ports/Alert.svelte'
     import CredentialEditor from './CredentialEditor.svelte'
+    import Loadable from 'common/Loadable.svelte'
 
     interface Props {
         params: { id: string };
@@ -19,17 +19,15 @@
     let allRoles: Role[] = $state([])
     let roleIsAllowed: Record<string, any> = $state({})
 
-    async function load () {
-        try {
-            user = await api.getUser({ id: params.id })
-            user.credentialPolicy ??= {}
+    const initPromise = init()
 
-            allRoles = await api.getRoles()
-            const allowedRoles = await api.getUserRoles(user)
-            roleIsAllowed = Object.fromEntries(allowedRoles.map(r => [r.id, true]))
-        } catch (err) {
-            error = await stringifyError(err)
-        }
+    async function init () {
+        user = await api.getUser({ id: params.id })
+        user.credentialPolicy ??= {}
+
+        allRoles = await api.getRoles()
+        const allowedRoles = await api.getUserRoles(user)
+        roleIsAllowed = Object.fromEntries(allowedRoles.map(r => [r.id, true]))
     }
 
     async function update () {
@@ -67,9 +65,7 @@
     }
 </script>
 
-{#await load()}
-    <DelayedSpinner />
-{:then}
+<Loadable promise={initPromise}>
 {#if user}
 <div class="page-summary-bar">
     <div>
@@ -106,7 +102,7 @@
     {/each}
 </div>
 {/if}
-{/await}
+</Loadable>
 
 {#if error}
     <Alert color="danger">{error}</Alert>
diff --git a/warpgate-web/src/admin/config/Parameters.svelte b/warpgate-web/src/admin/config/Parameters.svelte
index 960deb4f..7b46b794 100644
--- a/warpgate-web/src/admin/config/Parameters.svelte
+++ b/warpgate-web/src/admin/config/Parameters.svelte
@@ -1,19 +1,13 @@
 <script lang="ts">
     import { Input } from '@sveltestrap/sveltestrap'
     import { api, type ParameterValues } from 'admin/lib/api'
-    import Alert from 'common/sveltestrap-s5-ports/Alert.svelte'
-    import DelayedSpinner from 'common/DelayedSpinner.svelte'
-    import { stringifyError } from 'common/errors'
+    import Loadable from 'common/Loadable.svelte'
 
     let parameters: ParameterValues | undefined = $state()
-    let error: string|null = $state(null)
+    const initPromise = init()
 
-    async function load () {
-        try {
-            parameters = await api.getParameters({})
-        } catch (err) {
-            error = await stringifyError(err)
-        }
+    async function init () {
+        parameters = await api.getParameters({})
     }
 
 </script>
@@ -22,9 +16,7 @@
     <h1>global parameters</h1>
 </div>
 
-{#await load()}
-    <DelayedSpinner />
-{:then}
+<Loadable promise={initPromise}>
 {#if parameters}
     <label
         for="allowOwnCredentialManagement"
@@ -46,8 +38,4 @@
         <div>Allow users to manage their own credentials</div>
     </label>
 {/if}
-{/await}
-
-{#if error}
-    <Alert color="danger">{error}</Alert>
-{/if}
+</Loadable>
diff --git a/warpgate-web/src/common/ItemList.svelte b/warpgate-web/src/common/ItemList.svelte
index 90a4f075..34c5de20 100644
--- a/warpgate-web/src/common/ItemList.svelte
+++ b/warpgate-web/src/common/ItemList.svelte
@@ -23,7 +23,6 @@
     interface Props {
         page?: number
         pageSize?: number|undefined
-        // eslint-disable-next-line no-undef
         load: (_: LoadOptions) => Observable<PaginatedResponse<T>>
         showSearch?: boolean
         header?: import('svelte').Snippet<[any]>
@@ -73,7 +72,6 @@
     )
 
     const total = observe<number>(responses.pipe(map(x => x.total)), 0)
-    // eslint-disable-next-line no-undef
     const items = observe<T[]|null>(responses.pipe(map(x => x.items)), null)
 
     onDestroy(() => {
diff --git a/warpgate-web/src/common/Loadable.svelte b/warpgate-web/src/common/Loadable.svelte
new file mode 100644
index 00000000..0ade0273
--- /dev/null
+++ b/warpgate-web/src/common/Loadable.svelte
@@ -0,0 +1,42 @@
+<script lang="ts" generics="T">
+    import type { Snippet } from 'svelte'
+    import Alert from './sveltestrap-s5-ports/Alert.svelte'
+    import DelayedSpinner from './DelayedSpinner.svelte'
+    import { stringifyError } from './errors'
+
+    let { promise, children }: {
+        promise: Promise<T>
+        children: Snippet<[T]>
+    } = $props()
+
+    let loaded = $state(false)
+    let data: T | undefined = $state()
+    let error: string | undefined = $state()
+
+    $effect(() => {
+        loaded = false
+        data = undefined
+        promise.then(d => {
+            data = d
+        }).catch(err => {
+            stringifyError(err).then(e => {
+                error = e
+            })
+        }).finally(() => {
+            loaded = true
+        })
+    })
+
+</script>
+
+{#if !loaded}
+    <DelayedSpinner />
+{:else}
+    {#if !error}
+        {@render children?.(data!)}
+    {:else}
+        <Alert color="danger">
+            {error}
+        </Alert>
+    {/if}
+{/if}
diff --git a/warpgate-web/src/gateway/App.svelte b/warpgate-web/src/gateway/App.svelte
index dd4dce8b..31679611 100644
--- a/warpgate-web/src/gateway/App.svelte
+++ b/warpgate-web/src/gateway/App.svelte
@@ -1,94 +1,90 @@
 <script lang="ts">
-import Router, { push, type RouteDetail } from 'svelte-spa-router'
-import { wrap } from 'svelte-spa-router/wrap'
-import { get } from 'svelte/store'
-import { reloadServerInfo, serverInfo } from 'gateway/lib/store'
-import ThemeSwitcher from 'common/ThemeSwitcher.svelte'
-import DelayedSpinner from 'common/DelayedSpinner.svelte'
-import AuthBar from 'common/AuthBar.svelte'
-import Alert from 'common/sveltestrap-s5-ports/Alert.svelte'
-import Brand from 'common/Brand.svelte'
+    import Router, { push, type RouteDetail } from 'svelte-spa-router'
+    import { wrap } from 'svelte-spa-router/wrap'
+    import { get } from 'svelte/store'
+    import { reloadServerInfo, serverInfo } from 'gateway/lib/store'
+    import ThemeSwitcher from 'common/ThemeSwitcher.svelte'
+    import DelayedSpinner from 'common/DelayedSpinner.svelte'
+    import AuthBar from 'common/AuthBar.svelte'
+    import Brand from 'common/Brand.svelte'
+    import Loadable from 'common/Loadable.svelte'
 
-let redirecting = false
-let serverInfoPromise = reloadServerInfo()
+    let redirecting = false
+    let serverInfoPromise = reloadServerInfo()
 
-async function init () {
-    await serverInfoPromise
-}
+    async function init () {
+        await serverInfoPromise
+    }
 
-function onPageResume () {
-    redirecting = false
-    init()
-}
+    function onPageResume () {
+        redirecting = false
+        init()
+    }
 
-async function requireLogin (detail: RouteDetail) {
-    await serverInfoPromise
-    if (!get(serverInfo)?.username) {
-        let url = location.pathname + '#' + detail.location
-        if (detail.querystring) {
-            url += '?' + detail.querystring
+    async function requireLogin (detail: RouteDetail) {
+        await serverInfoPromise
+        if (!get(serverInfo)?.username) {
+            let url = location.pathname + '#' + detail.location
+            if (detail.querystring) {
+                url += '?' + detail.querystring
+            }
+            push('/login?next=' + encodeURIComponent(url))
+            return false
         }
-        push('/login?next=' + encodeURIComponent(url))
-        return false
+        return true
     }
-    return true
-}
 
-const routes = {
-    '/': wrap({
-        asyncComponent: () => import('./TargetList.svelte') as any,
-        props: {
-            'on:navigation': () => redirecting = true,
-        },
-        conditions: [requireLogin],
-    }),
-    '/profile': wrap({
-        asyncComponent: () => import('./Profile.svelte') as any,
-        conditions: [requireLogin],
-    }),
-    '/login': wrap({
-        asyncComponent: () => import('./Login.svelte') as any,
-    }),
-    '/login/:stateId': wrap({
-        asyncComponent: () => import('./OutOfBandAuth.svelte') as any,
-        conditions: [requireLogin],
-    }),
-}
+    const routes = {
+        '/': wrap({
+            asyncComponent: () => import('./TargetList.svelte') as any,
+            props: {
+                'on:navigation': () => redirecting = true,
+            },
+            conditions: [requireLogin],
+        }),
+        '/profile': wrap({
+            asyncComponent: () => import('./Profile.svelte') as any,
+            conditions: [requireLogin],
+        }),
+        '/login': wrap({
+            asyncComponent: () => import('./Login.svelte') as any,
+        }),
+        '/login/:stateId': wrap({
+            asyncComponent: () => import('./OutOfBandAuth.svelte') as any,
+            conditions: [requireLogin],
+        }),
+    }
 
-init()
+    const initPromise = init()
 </script>
 
 <svelte:window on:pageshow={onPageResume}/>
 
 <div class="container">
-{#await init()}
-    <DelayedSpinner />
-{:then _}
-    {#if redirecting}
-        <DelayedSpinner />
-    {:else}
-        <div class="d-flex align-items-center mt-5 mb-5">
-            <a class="logo" href="/@warpgate">
-                <Brand />
-            </a>
+    <Loadable promise={initPromise}>
+        {#if redirecting}
+            <DelayedSpinner />
+        {:else}
+            <div class="d-flex align-items-center mt-5 mb-5">
+                <a class="logo" href="/@warpgate">
+                    <Brand />
+                </a>
 
-            <AuthBar />
-        </div>
+                <AuthBar />
+            </div>
 
-        <main>
-            <Router {routes}/>
-        </main>
+            <main>
+                <Router {routes}/>
+            </main>
 
-        <footer class="mt-5">
-            <span class="me-auto ms-3">
-                v{$serverInfo?.version}
-            </span>
-            <ThemeSwitcher />
-        </footer>
-    {/if}
-{:catch error}
-    <Alert color="danger">{error}</Alert>
-{/await}
+            <footer class="mt-5">
+                <span class="me-auto ms-3">
+                    v{$serverInfo?.version}
+                </span>
+                <ThemeSwitcher />
+            </footer>
+        {/if}
+    </Loadable>
 </div>
 
 <style lang="scss">
diff --git a/warpgate-web/src/gateway/CredentialManager.svelte b/warpgate-web/src/gateway/CredentialManager.svelte
index ae168d4a..a39cc39a 100644
--- a/warpgate-web/src/gateway/CredentialManager.svelte
+++ b/warpgate-web/src/gateway/CredentialManager.svelte
@@ -1,29 +1,25 @@
 <script lang="ts">
     import { api, CredentialKind, PasswordState, type CredentialsState, type ExistingOtpCredential, type ExistingPublicKeyCredential } from 'gateway/lib/api'
     import { serverInfo } from 'gateway/lib/store'
-    import DelayedSpinner from 'common/DelayedSpinner.svelte'
     import Alert from 'common/sveltestrap-s5-ports/Alert.svelte'
-    import { stringifyError } from 'common/errors'
     import { faIdBadge, faKey, faKeyboard, faMobilePhone } from '@fortawesome/free-solid-svg-icons'
     import Fa from 'svelte-fa'
     import PublicKeyCredentialModal from 'admin/PublicKeyCredentialModal.svelte'
     import CreatePasswordModal from 'admin/CreatePasswordModal.svelte'
     import CreateOtpModal from 'admin/CreateOtpModal.svelte'
     import CredentialUsedStateBadge from 'common/CredentialUsedStateBadge.svelte'
+    import Loadable from 'common/Loadable.svelte'
 
-    let error: string|null = $state(null)
     let creds: CredentialsState | undefined = $state()
 
     let creatingPublicKeyCredential = $state(false)
     let creatingOtpCredential = $state(false)
     let changingPassword = $state(false)
 
-    async function load () {
-        try {
-            creds = await api.getMyCredentials()
-        } catch (err) {
-            error = await stringifyError(err)
-        }
+    const initPromise = init()
+
+    async function init () {
+        creds = await api.getMyCredentials()
     }
 
     async function changePassword (password: string) {
@@ -61,9 +57,7 @@
     }
 </script>
 
-{#await load()}
-    <DelayedSpinner />
-{:then}
+<Loadable promise={initPromise}>
 {#if creds}
     <div class="d-flex align-items-center mt-4 mb-2">
         <h4 class="m-0">Password</h4>
@@ -200,11 +194,7 @@
     </div>
     {/if}
 {/if}
-{/await}
-
-{#if error}
-<Alert color="danger">{error}</Alert>
-{/if}
+</Loadable>
 
 {#if changingPassword}
 <CreatePasswordModal
diff --git a/warpgate-web/src/gateway/Login.svelte b/warpgate-web/src/gateway/Login.svelte
index 45a8a098..f3f04b36 100644
--- a/warpgate-web/src/gateway/Login.svelte
+++ b/warpgate-web/src/gateway/Login.svelte
@@ -1,142 +1,143 @@
 <script lang="ts">
-import { get } from 'svelte/store'
-import { querystring, replace } from 'svelte-spa-router'
-import { FormGroup } from '@sveltestrap/sveltestrap'
-import Fa from 'svelte-fa'
-import { faArrowRight } from '@fortawesome/free-solid-svg-icons'
-import { faGoogle, faMicrosoft, faApple } from '@fortawesome/free-brands-svg-icons'
+    import { get } from 'svelte/store'
+    import { querystring, replace } from 'svelte-spa-router'
+    import { FormGroup } from '@sveltestrap/sveltestrap'
+    import Fa from 'svelte-fa'
+    import { faArrowRight } from '@fortawesome/free-solid-svg-icons'
+    import { faGoogle, faMicrosoft, faApple } from '@fortawesome/free-brands-svg-icons'
 
-import { api, ApiAuthState, LoginFailureResponseFromJSON, type SsoProviderDescription, SsoProviderKind, ResponseError } from 'gateway/lib/api'
-import { reloadServerInfo } from 'gateway/lib/store'
-import AsyncButton from 'common/AsyncButton.svelte'
-import DelayedSpinner from 'common/DelayedSpinner.svelte'
-import { stringifyError } from 'common/errors'
-import Alert from 'common/sveltestrap-s5-ports/Alert.svelte'
+    import { api, ApiAuthState, LoginFailureResponseFromJSON, type SsoProviderDescription, SsoProviderKind, ResponseError } from 'gateway/lib/api'
+    import { reloadServerInfo } from 'gateway/lib/store'
+    import AsyncButton from 'common/AsyncButton.svelte'
+    import { stringifyError } from 'common/errors'
+    import Alert from 'common/sveltestrap-s5-ports/Alert.svelte'
+    import Loadable from 'common/Loadable.svelte'
 
-let error: string|null = $state(null)
-let username = $state('')
-let password = $state('')
-let otp = $state('')
-let busy = $state(false)
-let otpInput: HTMLInputElement|undefined = $state()
-let authState: ApiAuthState|undefined = $state()
-let ssoProvidersPromise = api.getSsoProviders()
+    let error: string|null = $state(null)
+    let username = $state('')
+    let password = $state('')
+    let otp = $state('')
+    let busy = $state(false)
+    let otpInput: HTMLInputElement|undefined = $state()
+    let authState: ApiAuthState|undefined = $state()
+    let ssoProvidersPromise = api.getSsoProviders()
 
-const nextURL = new URLSearchParams(get(querystring)).get('next') ?? undefined
-const serverErrorMessage = new URLSearchParams(location.search).get('login_error')
+    const nextURL = new URLSearchParams(get(querystring)).get('next') ?? undefined
+    const serverErrorMessage = new URLSearchParams(location.search).get('login_error')
+    const initPromise = init()
 
-async function init () {
-    try {
-        authState = (await api.getDefaultAuthState()).state
-    } catch (err) {
-        if (err instanceof ResponseError) {
-            if (err.response.status === 404) {
-                authState = ApiAuthState.NotStarted
+    async function init () {
+        try {
+            authState = (await api.getDefaultAuthState()).state
+        } catch (err) {
+            if (err instanceof ResponseError) {
+                if (err.response.status === 404) {
+                    authState = ApiAuthState.NotStarted
+                }
+            } else {
+                throw err
             }
         }
+        continueWithState()
     }
-    continueWithState()
-}
 
-function success () {
-    if (nextURL) {
-        location.assign(nextURL)
-    } else {
-        replace('/')
+    function success () {
+        if (nextURL) {
+            location.assign(nextURL)
+        } else {
+            replace('/')
+        }
     }
-}
 
-async function continueWithState () {
-    if (authState === ApiAuthState.Success) {
-        success()
-    }
-    if (authState === ApiAuthState.SsoNeeded) {
-        const providers = await ssoProvidersPromise
-        if (!providers.length) {
-            // todo
+    async function continueWithState () {
+        if (authState === ApiAuthState.Success) {
+            success()
         }
-        if (providers.length === 1) {
-            startSSO(providers[0]!)
+        if (authState === ApiAuthState.SsoNeeded) {
+            const providers = await ssoProvidersPromise
+            if (!providers.length) {
+                // todo
+            }
+            if (providers.length === 1) {
+                startSSO(providers[0]!)
+            }
+        }
+        if (authState === ApiAuthState.OtpNeeded) {
+            setTimeout(() => {
+                otpInput?.focus()
+            })
         }
     }
-    if (authState === ApiAuthState.OtpNeeded) {
-        setTimeout(() => {
-            otpInput?.focus()
-        })
-    }
-}
 
-async function login () {
-    busy = true
-    try {
-        await _login()
-    } finally {
-        busy = false
+    async function login () {
+        busy = true
+        try {
+            await _login()
+        } finally {
+            busy = false
+        }
     }
-}
 
-async function _login () {
-    error = null
-    try {
-        if (authState === ApiAuthState.OtpNeeded) {
-            await api.otpLogin({
-                otpLoginRequest: {
-                    otp,
-                },
-            })
-        } else {
-            await api.login({
-                loginRequest: {
-                    username,
-                    password,
-                },
-            })
-        }
-        await reloadServerInfo()
-        success()
-    } catch (err) {
-        if (err instanceof ResponseError) {
-            if (err.response.status === 401) {
-                const failure = LoginFailureResponseFromJSON(await err.response.json())
-                authState = failure.state
+    async function _login () {
+        error = null
+        try {
+            if (authState === ApiAuthState.OtpNeeded) {
+                await api.otpLogin({
+                    otpLoginRequest: {
+                        otp,
+                    },
+                })
+            } else {
+                await api.login({
+                    loginRequest: {
+                        username,
+                        password,
+                    },
+                })
+            }
+            await reloadServerInfo()
+            success()
+        } catch (err) {
+            if (err instanceof ResponseError) {
+                if (err.response.status === 401) {
+                    const failure = LoginFailureResponseFromJSON(await err.response.json())
+                    authState = failure.state
 
-                continueWithState()
+                    continueWithState()
+                } else {
+                    error = await err.response.text()
+                }
             } else {
-                error = await err.response.text()
+                error = await stringifyError(err)
             }
-        } else {
-            error = await stringifyError(err)
         }
     }
-}
 
-async function cancel () {
-    await api.cancelDefaultAuth()
-    location.reload()
-}
+    async function cancel () {
+        await api.cancelDefaultAuth()
+        location.reload()
+    }
 
-function onInputKey (event: KeyboardEvent) {
-    if (event.key === 'Enter') {
-        login()
-        event.preventDefault()
+    function onInputKey (event: KeyboardEvent) {
+        if (event.key === 'Enter') {
+            login()
+            event.preventDefault()
+        }
     }
-}
 
-async function startSSO (provider: SsoProviderDescription) {
-    busy = true
-    try {
-        const p = await api.startSso({ name: provider.name, next: nextURL })
-        location.href = p.url
-    } catch (err) {
-        error = await stringifyError(err)
-        busy = false
+    async function startSSO (provider: SsoProviderDescription) {
+        busy = true
+        try {
+            const p = await api.startSso({ name: provider.name, next: nextURL })
+            location.href = p.url
+        } catch (err) {
+            error = await stringifyError(err)
+            busy = false
+        }
     }
-}
 </script>
 
-{#await init()}
-    <DelayedSpinner />
-{:then}
+<Loadable promise={initPromise}>
     <form class="mt-5" autocomplete="on">
         <div class="page-summary-bar">
             {#if authState === ApiAuthState.NotStarted || authState === ApiAuthState.Failed}
@@ -206,30 +207,32 @@ async function startSSO (provider: SsoProviderDescription) {
         {/if}
     </form>
 
-    {#await ssoProvidersPromise then ssoProviders}
-        {#if authState === ApiAuthState.SsoNeeded || authState === ApiAuthState.NotStarted || authState === ApiAuthState.Failed}
-            <div class="mt-5 sso-buttons">
-                {#each ssoProviders as ssoProvider}
-                    <button
-                        class="btn btn-secondary"
-                        disabled={busy}
-                        onclick={() => startSSO(ssoProvider)}
-                    >
-                        {#if ssoProvider.kind === SsoProviderKind.Google}
-                            <Fa fw class="me-2" icon={faGoogle} />
-                        {/if}
-                        {#if ssoProvider.kind === SsoProviderKind.Azure}
-                            <Fa fw class="me-2" icon={faMicrosoft} />
-                        {/if}
-                        {#if ssoProvider.kind === SsoProviderKind.Apple}
-                            <Fa fw class="me-2" icon={faApple} />
-                        {/if}
-                        {ssoProvider.label}
-                    </button>
-                {/each}
-            </div>
-        {/if}
-    {/await}
+    {#if authState === ApiAuthState.SsoNeeded || authState === ApiAuthState.NotStarted || authState === ApiAuthState.Failed}
+        <Loadable promise={ssoProvidersPromise}>
+            {#snippet children(ssoProviders)}
+                <div class="mt-5 sso-buttons">
+                    {#each ssoProviders as ssoProvider}
+                        <button
+                            class="btn btn-secondary"
+                            disabled={busy}
+                            onclick={() => startSSO(ssoProvider)}
+                        >
+                            {#if ssoProvider.kind === SsoProviderKind.Google}
+                                <Fa fw class="me-2" icon={faGoogle} />
+                            {/if}
+                            {#if ssoProvider.kind === SsoProviderKind.Azure}
+                                <Fa fw class="me-2" icon={faMicrosoft} />
+                            {/if}
+                            {#if ssoProvider.kind === SsoProviderKind.Apple}
+                                <Fa fw class="me-2" icon={faApple} />
+                            {/if}
+                            {ssoProvider.label}
+                        </button>
+                    {/each}
+                </div>
+            {/snippet}
+        </Loadable>
+    {/if}
 
     {#if authState !== ApiAuthState.NotStarted && authState !== ApiAuthState.Failed}
         <button
@@ -239,7 +242,7 @@ async function startSSO (provider: SsoProviderDescription) {
             Cancel
         </button>
     {/if}
-{/await}
+</Loadable>
 
 <style lang="scss">
     h1 {
diff --git a/warpgate-web/src/gateway/OutOfBandAuth.svelte b/warpgate-web/src/gateway/OutOfBandAuth.svelte
index 68847894..08cc492e 100644
--- a/warpgate-web/src/gateway/OutOfBandAuth.svelte
+++ b/warpgate-web/src/gateway/OutOfBandAuth.svelte
@@ -1,37 +1,37 @@
 <script lang="ts">
-import { api, ApiAuthState, type AuthStateResponseInternal } from 'gateway/lib/api'
-import AsyncButton from 'common/AsyncButton.svelte'
-import DelayedSpinner from 'common/DelayedSpinner.svelte'
-import RelativeDate from 'admin/RelativeDate.svelte'
-import Alert from 'common/sveltestrap-s5-ports/Alert.svelte'
+    import { api, ApiAuthState, type AuthStateResponseInternal } from 'gateway/lib/api'
+    import AsyncButton from 'common/AsyncButton.svelte'
+    import RelativeDate from 'admin/RelativeDate.svelte'
+    import Alert from 'common/sveltestrap-s5-ports/Alert.svelte'
+    import Loadable from 'common/Loadable.svelte'
 
-interface Props {
-    params: { stateId: string };
-}
+    interface Props {
+        params: { stateId: string };
+    }
 
-let { params }: Props = $props()
+    let { params }: Props = $props()
 
-let authState: AuthStateResponseInternal | undefined = $state()
+    let authState: AuthStateResponseInternal | undefined = $state()
 
-async function reload () {
-    authState = await api.getAuthState({ id: params.stateId })
-}
+    async function reload () {
+        authState = await api.getAuthState({ id: params.stateId })
+    }
 
-async function init () {
-    await reload()
-}
+    async function init () {
+        await reload()
+    }
 
-async function approve () {
-    api.approveAuth({ id: params.stateId })
-    await reload()
-    window.close()
-}
+    async function approve () {
+        api.approveAuth({ id: params.stateId })
+        await reload()
+        window.close()
+    }
 
-async function reject () {
-    api.rejectAuth({ id: params.stateId })
-    await reload()
-    window.close()
-}
+    async function reject () {
+        api.rejectAuth({ id: params.stateId })
+        await reload()
+        window.close()
+    }
 </script>
 
 <style lang="scss">
@@ -47,9 +47,7 @@ async function reject () {
     }
 </style>
 
-{#await init()}
-    <DelayedSpinner />
-{:then}
+<Loadable promise={init()}>
 {#if authState}
     <div class="page-summary-bar">
         <h1>authorization request</h1>
@@ -102,4 +100,4 @@ async function reject () {
         </div>
     {/if}
 {/if}
-{/await}
+</Loadable>
diff --git a/warpgate-web/src/theme/_theme.scss b/warpgate-web/src/theme/_theme.scss
index e250aaff..f88e9bb2 100644
--- a/warpgate-web/src/theme/_theme.scss
+++ b/warpgate-web/src/theme/_theme.scss
@@ -99,16 +99,16 @@ $font-family-os: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
     }
 }
 
-.alert {
-    border-top-style: none;
-    border-bottom-style: none;
-    border-right-style: none;
-    border-left-width: 2px;
-    font-style: italic;
-    background: rgba(0,0,0,.25) !important;
-    padding: 0.7rem 1rem;
-    margin: 1rem 0;
-}
+// .alert {
+//     border-top-style: none;
+//     border-bottom-style: none;
+//     border-right-style: none;
+//     border-left-width: 2px;
+//     font-style: italic;
+//     background: rgba(0,0,0,.25) !important;
+//     padding: 0.7rem 1rem;
+//     margin: 1rem 0;
+// }
 
 footer {
     display: flex;
diff --git a/warpgate-web/src/theme/theme.light.scss b/warpgate-web/src/theme/theme.light.scss
index 9695005e..f933af17 100644
--- a/warpgate-web/src/theme/theme.light.scss
+++ b/warpgate-web/src/theme/theme.light.scss
@@ -9,10 +9,6 @@ header {
     border-bottom: 1px solid rgba($body-color, .75);
 }
 
-.alert {
-    background: none !important;
-}
-
 body {
     color-scheme: light;
 }
diff --git a/warpgate-web/src/theme/vars.common.scss b/warpgate-web/src/theme/vars.common.scss
index 1d1381c7..db646708 100644
--- a/warpgate-web/src/theme/vars.common.scss
+++ b/warpgate-web/src/theme/vars.common.scss
@@ -34,3 +34,6 @@ $badge-font-size: .8em;
 $badge-font-weight: 400;
 $badge-padding-y: .55em;
 $badge-padding-x: .85em;
+
+$alert-border-width: 0;
+$alert-border-scale: -30%;
diff --git a/warpgate-web/src/theme/vars.dark.scss b/warpgate-web/src/theme/vars.dark.scss
index fd8fcaca..dcfbf627 100644
--- a/warpgate-web/src/theme/vars.dark.scss
+++ b/warpgate-web/src/theme/vars.dark.scss
@@ -6,8 +6,6 @@ $body-color: #c1c9e4;
 $font-family-sans-serif: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 $link-color: $body-color;
 $list-group-bg: transparent;
-$alert-border-radius: 0;
-$alert-border-scale: -30%;
 
 
 $blue:    #449fbe;
@@ -25,6 +23,7 @@ $secondary: #748d95;
 $light: transparent;
 $info: $blue;
 
+
 $component-active-bg: $primary;
 
 $input-bg: #1c1c24;
@@ -83,3 +82,17 @@ $form-switch-padding-start:       3em;
 
 $form-check-input-checked-border-color:   shade-color($form-check-color, $btn-active-border-shade-amount);
 $form-check-input-checked-bg-color:       shade-color($form-check-color, $btn-active-bg-shade-amount);
+
+$primary-bg-subtle:       shade-color($primary, 80%);
+$secondary-bg-subtle:     shade-color($secondary, 80%);
+$success-bg-subtle:       shade-color($success, 80%);
+$info-bg-subtle:          shade-color($info, 80%);
+$warning-bg-subtle:       shade-color($warning, 80%);
+$danger-bg-subtle:        shade-color($danger, 80%);
+
+$primary-text-emphasis:   tint-color($primary, 60%);
+$secondary-text-emphasis: tint-color($secondary, 60%);
+$success-text-emphasis:   tint-color($success, 60%);
+$info-text-emphasis:      tint-color($info, 60%);
+$warning-text-emphasis:   tint-color($warning, 60%);
+$danger-text-emphasis:    tint-color($danger, 60%);
diff --git a/warpgate-web/src/theme/vars.light.scss b/warpgate-web/src/theme/vars.light.scss
index 0a476ca4..ef5d2d22 100644
--- a/warpgate-web/src/theme/vars.light.scss
+++ b/warpgate-web/src/theme/vars.light.scss
@@ -5,9 +5,6 @@ $body-color: #555;
 $font-family-sans-serif: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 $link-color: $body-color;
 $list-group-bg: transparent;
-$alert-border-radius: 0;
-$alert-border-scale: -30%;
-
 
 $blue:    #3573ac !default;
 $purple:  #5C398F !default;
@@ -46,3 +43,17 @@ $form-switch-padding-start:       3em;
 
 $form-check-input-checked-border-color:   tint-color($form-check-color, $btn-active-border-tint-amount);
 $form-check-input-checked-bg-color:       tint-color($form-check-color, $btn-active-bg-tint-amount);
+
+$primary-bg-subtle:       tint-color($primary, 90%);
+$secondary-bg-subtle:     tint-color($secondary, 90%);
+$success-bg-subtle:       tint-color($success, 90%);
+$info-bg-subtle:          tint-color($info, 90%);
+$warning-bg-subtle:       tint-color($warning, 90%);
+$danger-bg-subtle:        tint-color($danger, 90%);
+
+$primary-text-emphasis:   shade-color($primary, 10%);
+$secondary-text-emphasis: shade-color($secondary, 10%);
+$success-text-emphasis:   shade-color($success, 10%);
+$info-text-emphasis:      shade-color($info, 10%);
+$warning-text-emphasis:   shade-color($warning, 10%);
+$danger-text-emphasis:    shade-color($danger, 10%);