feat: Wordpress on-demand SFTP

src/lib/components/Setting.svelte

@@ -7,6 +7,7 @@
 	export let isCenter = true;
 	export let disabled = false;
 	export let dataTooltip = null;
+	export let loading = false;
 </script>
 
 <div class="flex items-center py-4 pr-8">
@@ -26,7 +27,7 @@
 		on:click
 		aria-pressed="false"
 		class="relative mx-20 inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out"
-		class:opacity-50={disabled}
+		class:opacity-50={disabled || loading}
 		class:bg-green-600={setting}
 		class:bg-stone-700={!setting}
 	>
@@ -40,6 +41,7 @@
 				class=" absolute inset-0 flex h-full w-full items-center justify-center transition-opacity duration-200 ease-in"
 				class:opacity-0={setting}
 				class:opacity-100={!setting}
+				class:animate-spin={loading}
 				aria-hidden="true"
 			>
 				<svg class="h-3 w-3 bg-white text-red-600" fill="none" viewBox="0 0 12 12">
@@ -57,6 +59,7 @@
 				aria-hidden="true"
 				class:opacity-100={setting}
 				class:opacity-0={!setting}
+				class:animate-spin={loading}
 			>
 				<svg class="h-3 w-3 bg-white text-green-600" fill="currentColor" viewBox="0 0 12 12">
 					<path