diff --git a/frontend/src/routes/settings/panels/Access.svelte b/frontend/src/routes/settings/panels/Access.svelte
index 57f85706..74a7561e 100644
--- a/frontend/src/routes/settings/panels/Access.svelte
+++ b/frontend/src/routes/settings/panels/Access.svelte
@@ -3,7 +3,7 @@
 	import { api } from '$lib/api/apiProxy.js';
 	import { addToast } from '$lib/store/toast';
 	import SettingsCard from '$lib/components/SettingsCard.svelte';
-	import SettingsLoading from '$lib/components/SettingsLoading.svelte';
+	import { showIsLoading, hideIsLoading } from '$lib/store/loading';
 	import Button from '$lib/components/Button.svelte';
 	import Modal from '$lib/components/Modal.svelte';
 	import DeleteAlert from '$lib/components/modal/DeleteAlert.svelte';
@@ -58,10 +58,12 @@
 	};
 
 	onMount(async () => {
+		showIsLoading();
 		try {
 			await refreshSSO();
 		} finally {
 			loaded = true;
+			hideIsLoading();
 		}
 	});
 
@@ -155,9 +157,7 @@
 	};
 </script>
 
-{#if !loaded}
-	<SettingsLoading />
-{:else}
+{#if loaded}
 	<div class="flex flex-wrap gap-6">
 		<SettingsCard title="Single Sign-On">
 			<div class="bg-gray-50 rounded-md p-3">
diff --git a/frontend/src/routes/settings/panels/Branding.svelte b/frontend/src/routes/settings/panels/Branding.svelte
index 0a13cd5d..7632b2a4 100644
--- a/frontend/src/routes/settings/panels/Branding.svelte
+++ b/frontend/src/routes/settings/panels/Branding.svelte
@@ -13,7 +13,7 @@
 		BRANDING_DEFAULT_DISPLAY
 	} from '$lib/store/branding';
 	import SettingsCard from '$lib/components/SettingsCard.svelte';
-	import SettingsLoading from '$lib/components/SettingsLoading.svelte';
+	import { showIsLoading, hideIsLoading } from '$lib/store/loading';
 	import Button from '$lib/components/Button.svelte';
 	import FileField from '$lib/components/FileField.svelte';
 	import CheckboxField from '$lib/components/CheckboxField.svelte';
@@ -40,9 +40,14 @@
 	}
 
 	onMount(async () => {
-		await loadBranding();
-		syncForms();
-		loaded = true;
+		showIsLoading();
+		try {
+			await loadBranding();
+			syncForms();
+		} finally {
+			loaded = true;
+			hideIsLoading();
+		}
 	});
 
 	// preview resolves the image shown in a card for a slot
@@ -169,9 +174,7 @@
 	}
 </script>
 
-{#if !loaded}
-	<SettingsLoading />
-{:else}
+{#if loaded}
 	<div class="flex flex-wrap gap-6">
 		<SettingsCard title="Header logo">
 			<p class="text-gray-600 dark:text-gray-300 text-sm mb-4 transition-colors duration-200">
diff --git a/frontend/src/routes/settings/panels/Data.svelte b/frontend/src/routes/settings/panels/Data.svelte
index 442ecdb2..cb1f7eb3 100644
--- a/frontend/src/routes/settings/panels/Data.svelte
+++ b/frontend/src/routes/settings/panels/Data.svelte
@@ -4,7 +4,7 @@
 	import { addToast } from '$lib/store/toast';
 	import { AppStateService } from '$lib/service/appState';
 	import SettingsCard from '$lib/components/SettingsCard.svelte';
-	import SettingsLoading from '$lib/components/SettingsLoading.svelte';
+	import { showIsLoading, hideIsLoading } from '$lib/store/loading';
 	import RadioOption from '$lib/components/RadioOption.svelte';
 	import Button from '$lib/components/Button.svelte';
 	import FileField from '$lib/components/FileField.svelte';
@@ -55,11 +55,13 @@
 	}
 
 	onMount(async () => {
+		showIsLoading();
 		try {
 			await refreshAutoPrune();
 			await refreshBackupList();
 		} finally {
 			loaded = true;
+			hideIsLoading();
 		}
 	});
 
@@ -216,9 +218,7 @@
 	};
 </script>
 
-{#if !loaded}
-	<SettingsLoading />
-{:else}
+{#if loaded}
 <div class="flex flex-wrap gap-6">
 	<SettingsCard title="Import">
 		<div class="space-y-4">
diff --git a/frontend/src/routes/settings/panels/General.svelte b/frontend/src/routes/settings/panels/General.svelte
index 4f8eae1f..eeade44d 100644
--- a/frontend/src/routes/settings/panels/General.svelte
+++ b/frontend/src/routes/settings/panels/General.svelte
@@ -6,7 +6,6 @@
 	import { hideIsLoading, showIsLoading } from '$lib/store/loading';
 	import { displayMode, DISPLAY_MODE } from '$lib/store/displayMode';
 	import SettingsCard from '$lib/components/SettingsCard.svelte';
-	import SettingsLoading from '$lib/components/SettingsLoading.svelte';
 	import RadioOption from '$lib/components/RadioOption.svelte';
 	import Form from '$lib/components/Form.svelte';
 	import FormButton from '$lib/components/FormButton.svelte';
@@ -24,11 +23,13 @@
 	let updateSettingsError = '';
 
 	onMount(async () => {
+		showIsLoading();
 		try {
 			await refreshDisplayMode();
 			await refreshSettings();
 		} finally {
 			loaded = true;
+			hideIsLoading();
 		}
 	});
 
@@ -107,9 +108,7 @@
 	};
 </script>
 
-{#if !loaded}
-	<SettingsLoading />
-{:else}
+{#if loaded}
 <div class="flex flex-wrap gap-6">
 	<SettingsCard title="Display Mode">
 		<div class="space-y-4">
diff --git a/frontend/src/routes/settings/panels/Reports.svelte b/frontend/src/routes/settings/panels/Reports.svelte
index 5f7d29f9..fe8ffe19 100644
--- a/frontend/src/routes/settings/panels/Reports.svelte
+++ b/frontend/src/routes/settings/panels/Reports.svelte
@@ -4,7 +4,6 @@
 	import { addToast } from '$lib/store/toast';
 	import { hideIsLoading, showIsLoading } from '$lib/store/loading';
 	import SettingsCard from '$lib/components/SettingsCard.svelte';
-	import SettingsLoading from '$lib/components/SettingsLoading.svelte';
 	import Button from '$lib/components/Button.svelte';
 	import Modal from '$lib/components/Modal.svelte';
 	import Alert from '$lib/components/Alert.svelte';
@@ -35,10 +34,12 @@
 	let reportKind = 'phishing'; // 'phishing' | 'training'
 
 	onMount(async () => {
+		showIsLoading();
 		try {
 			await refreshReportPDFEnabled();
 		} finally {
 			loaded = true;
+			hideIsLoading();
 		}
 	});
 
@@ -168,9 +169,7 @@
 	};
 </script>
 
-{#if !loaded}
-	<SettingsLoading />
-{:else}
+{#if loaded}
 <div class="flex flex-wrap gap-6">
 	<SettingsCard title="PDF Reports">
 		<div class="space-y-4">
diff --git a/frontend/src/routes/settings/panels/Scim.svelte b/frontend/src/routes/settings/panels/Scim.svelte
index 04376cff..36644086 100644
--- a/frontend/src/routes/settings/panels/Scim.svelte
+++ b/frontend/src/routes/settings/panels/Scim.svelte
@@ -3,7 +3,7 @@
 	import { api } from '$lib/api/apiProxy.js';
 	import { addToast } from '$lib/store/toast';
 	import SettingsCard from '$lib/components/SettingsCard.svelte';
-	import SettingsLoading from '$lib/components/SettingsLoading.svelte';
+	import { showIsLoading, hideIsLoading } from '$lib/store/loading';
 	import Form from '$lib/components/Form.svelte';
 	import FormButton from '$lib/components/FormButton.svelte';
 	import FormError from '$lib/components/FormError.svelte';
@@ -21,11 +21,13 @@
 	let scimRetentionDays = 30;
 
 	onMount(async () => {
+		showIsLoading();
 		try {
 			await refreshScimDomain();
 			await refreshScimRetention();
 		} finally {
 			loaded = true;
+			hideIsLoading();
 		}
 	});
 
@@ -96,9 +98,7 @@
 
 </script>
 
-{#if !loaded}
-	<SettingsLoading />
-{:else}
+{#if loaded}
 	<div class="flex flex-wrap gap-6">
 		<SettingsCard title="SCIM Provisioning">
 			<p class="text-gray-600 dark:text-gray-300 text-sm transition-colors duration-200">
diff --git a/frontend/src/routes/settings/panels/System.svelte b/frontend/src/routes/settings/panels/System.svelte
index f8a204b2..129e8e41 100644
--- a/frontend/src/routes/settings/panels/System.svelte
+++ b/frontend/src/routes/settings/panels/System.svelte
@@ -5,7 +5,7 @@
 	import { addToast } from '$lib/store/toast';
 	import { onClickCopy } from '$lib/utils/common';
 	import SettingsCard from '$lib/components/SettingsCard.svelte';
-	import SettingsLoading from '$lib/components/SettingsLoading.svelte';
+	import { showIsLoading, hideIsLoading } from '$lib/store/loading';
 	import Button from '$lib/components/Button.svelte';
 	import Alert from '$lib/components/Alert.svelte';
 	import Form from '$lib/components/Form.svelte';
@@ -30,12 +30,14 @@
 	let isWipeAlertVisible = false;
 
 	onMount(async () => {
+		showIsLoading();
 		try {
 			await refreshLogLevel();
 			await refreshVersion();
 			await refreshUpdateCached();
 		} finally {
 			loaded = true;
+			hideIsLoading();
 		}
 	});
 
@@ -136,9 +138,7 @@
 	};
 </script>
 
-{#if !loaded}
-	<SettingsLoading />
-{:else}
+{#if loaded}
 <div class="flex flex-wrap gap-6">
 	<SettingsCard title="Logging">
 		<Form on:submit={saveLogLevel} fullWidth>
@@ -233,3 +233,4 @@
 		which can take a few minutes.
 	</p>
 </Alert>
+