tweak: make spinner icons actually spinny

PluralKit · Oct 2, 2024 · d1be594 · d1be594
1 parent b2ac54d
commit d1be594
Show file tree

Hide file tree

Showing 12 changed files with 51 additions and 31 deletions.
diff --git a/src/components/Spinny.svelte b/src/components/Spinny.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+  let {
+    size = "xs",
+  }: {
+    size?: "xs" | "sm" | "md"
+  } = $props()
+</script>
+
+<span class={`loading loading-spinner loading-${size} text-muted`}></span>
diff --git a/src/components/dash/AwaitHtml.svelte b/src/components/dash/AwaitHtml.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
+  import Spinny from "$components/Spinny.svelte"
+
   export let htmlPromise: Promise<string> = Promise.resolve("")
 </script>
 
 {#await htmlPromise}
-  (loading...)
+  <Spinny /> loading...
 {:then html}
   {@html html ?? ""}
 {:catch error}

diff --git a/src/components/dash/groups/create/GroupCreate.svelte b/src/components/dash/groups/create/GroupCreate.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { dash, type DashList } from "$lib/dash/dash.svelte"
-  import { IconLoader, IconPlus, IconAlertTriangle } from "@tabler/icons-svelte"
+  import { IconPlus } from "@tabler/icons-svelte"
   import { untrack } from "svelte"
   import type { Group, GroupPrivacy, Member } from "$api/types"
   import { fade } from "svelte/transition"
@@ -10,6 +10,7 @@
   import GroupInfoCreate from "./GroupInfoCreate.svelte"
   import GroupMemberCreate from "./GroupMemberCreate.svelte"
   import DuplicateName from "$components/dash/edit/DuplicateName.svelte"
+  import Spinny from "$components/Spinny.svelte"
 
   let {
     forceOpen = false,
@@ -158,7 +159,7 @@
             />
           {:else}
             <button class="btn btn-sm btn-neutral join-item" disabled>
-              <IconLoader /> Loading...
+              <Spinny /> Loading...
             </button>
           {/if}
         </div>

diff --git a/src/components/dash/groups/edit/GroupInfoEdit.svelte b/src/components/dash/groups/edit/GroupInfoEdit.svelte
@@ -3,9 +3,10 @@
   import DeleteButton from "$components/dash/edit/DeleteButton.svelte"
   import EditPrivacy from "$components/dash/edit/EditPrivacy.svelte"
   import SubmitEditButton from "$components/dash/edit/SubmitEditButton.svelte"
-  import { dash, type DashList } from "$lib/dash/dash.svelte"
+  import Spinny from "$components/Spinny.svelte"
+  import { type DashList } from "$lib/dash/dash.svelte"
   import { createInfoEditState } from "$lib/dash/group/edit.svelte"
-  import { IconLoader, IconPencil, IconPlus, IconTrash, IconX } from "@tabler/icons-svelte"
+  import { IconX } from "@tabler/icons-svelte"
   import { fade } from "svelte/transition"
 
   let {
@@ -93,7 +94,7 @@
     {/if}
   {:else}
     <button class="btn btn-sm btn-neutral join-item" disabled>
-      <IconLoader /> Loading...
+      <Spinny /> Loading...
     </button>
   {/if}
 </div>
@@ -217,7 +218,7 @@
       {/if}
     {:else}
       <button onclick={() => (mode = "view")} class="btn btn-sm btn-neutral join-item" disabled>
-        <IconLoader /> Loading...
+        <Spinny /> Loading...
       </button>
     {/if}
   </div>

diff --git a/src/components/dash/groups/edit/GroupMemberEdit.svelte b/src/components/dash/groups/edit/GroupMemberEdit.svelte
@@ -1,13 +1,14 @@
 <script lang="ts">
   import type { Group, Member } from "$api/types"
-  import { dash, type DashList } from "$lib/dash/dash.svelte"
-  import { IconRefresh, IconLoader, IconMinus, IconPlus, IconX } from "@tabler/icons-svelte"
+  import { type DashList } from "$lib/dash/dash.svelte"
+  import { IconRefresh, IconMinus, IconPlus, IconX } from "@tabler/icons-svelte"
   import Svelecte from "svelecte"
   import SubmitEditButton from "$components/dash/edit/SubmitEditButton.svelte"
   import { fade } from "svelte/transition"
   import SimplePagination from "$components/dash/SimplePagination.svelte"
   import GroupMemberList from "../GroupMemberList.svelte"
   import DeleteButton from "$components/dash/edit/DeleteButton.svelte"
+  import Spinny from "$components/Spinny.svelte"
 
   let {
     membersCurrent,
@@ -83,7 +84,7 @@
     {/if}
   {:else}
     <button class="btn btn-sm btn-neutral join-item" disabled>
-      <IconLoader /> Loading...
+      <Spinny /> Loading...
     </button>
   {/if}
 </div>
@@ -271,7 +272,7 @@
       {/if}
     {:else}
       <button onclick={() => (mode = "view")} class="btn btn-sm btn-neutral join-item" disabled>
-        <IconLoader /> Loading...
+        <Spinny /> Loading...
       </button>
     {/if}
   </div>

diff --git a/src/components/dash/groups/edit/GroupViewEdit.svelte b/src/components/dash/groups/edit/GroupViewEdit.svelte
@@ -7,9 +7,10 @@
   import EditField from "$components/dash/edit/EditField.svelte"
   import EditImage from "$components/dash/edit/EditImage.svelte"
   import SubmitEditButton from "$components/dash/edit/SubmitEditButton.svelte"
+  import Spinny from "$components/Spinny.svelte"
   import { type DashList } from "$lib/dash/dash.svelte"
   import { createViewEditState } from "$lib/dash/group/edit.svelte"
-  import { IconLoader, IconX } from "@tabler/icons-svelte"
+  import { IconX } from "@tabler/icons-svelte"
   import { fade } from "svelte/transition"
 
   let {
@@ -72,7 +73,7 @@
     {/if}
   {:else}
     <button onclick={() => (mode = "view")} class="btn btn-sm btn-neutral join-item" disabled>
-      <IconLoader /> Loading...
+      <Spinny /> Loading...
     </button>
   {/if}
 </div>
@@ -158,7 +159,7 @@
       {/if}
     {:else}
       <button onclick={() => (mode = "view")} class="btn btn-sm btn-neutral join-item" disabled>
-        <IconLoader /> Loading...
+        <Spinny /> Loading...
       </button>
     {/if}
   </div>

diff --git a/src/components/dash/members/create/MemberCreate.svelte b/src/components/dash/members/create/MemberCreate.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { dash, type DashList } from "$lib/dash/dash.svelte"
   import { createMemberCreationState } from "$lib/dash/member/edit.svelte"
-  import { IconLoader, IconPlus } from "@tabler/icons-svelte"
+  import { IconPlus } from "@tabler/icons-svelte"
   import { untrack } from "svelte"
   import MemberViewCreate from "./MemberViewCreate.svelte"
   import MemberInfoCreate from "./MemberInfoCreate.svelte"
@@ -10,6 +10,7 @@
   import { fade } from "svelte/transition"
   import SubmitCreateButton from "$components/dash/edit/SubmitCreateButton.svelte"
   import DuplicateName from "$components/dash/edit/DuplicateName.svelte"
+  import Spinny from "$components/Spinny.svelte"
 
   let {
     forceOpen = false,
@@ -161,7 +162,7 @@
             />
           {:else}
             <button class="btn btn-sm btn-neutral join-item" disabled>
-              <IconLoader /> Loading...
+              <Spinny /> Loading...
             </button>
           {/if}
         </div>

diff --git a/src/components/dash/members/edit/MemberGroupEdit.svelte b/src/components/dash/members/edit/MemberGroupEdit.svelte
@@ -15,6 +15,7 @@
   import SubmitEditButton from "$components/dash/edit/SubmitEditButton.svelte"
   import { fade } from "svelte/transition"
   import DeleteButton from "$components/dash/edit/DeleteButton.svelte"
+  import Spinny from "$components/Spinny.svelte"
 
   let {
     groupsCurrent,
@@ -97,7 +98,7 @@
     {/if}
   {:else}
     <button class="btn btn-sm btn-neutral join-item" disabled>
-      <IconLoader /> Loading...
+      <Spinny /> Loading...
     </button>
   {/if}
 </div>
@@ -291,7 +292,7 @@
       {/if}
     {:else}
       <button onclick={() => (mode = "view")} class="btn btn-sm btn-neutral join-item" disabled>
-        <IconLoader /> Loading...
+        <Spinny /> Loading...
       </button>
     {/if}
   </div>

diff --git a/src/components/dash/members/edit/MemberInfoEdit.svelte b/src/components/dash/members/edit/MemberInfoEdit.svelte
@@ -4,9 +4,10 @@
   import EditPrivacy from "$components/dash/edit/EditPrivacy.svelte"
   import EditProxyTag from "$components/dash/edit/EditProxyTag.svelte"
   import SubmitEditButton from "$components/dash/edit/SubmitEditButton.svelte"
+  import Spinny from "$components/Spinny.svelte"
   import { type DashList } from "$lib/dash/dash.svelte"
   import { createInfoEditState } from "$lib/dash/member/edit.svelte"
-  import { IconLoader, IconPencil, IconPlus, IconAlertTriangle, IconX } from "@tabler/icons-svelte"
+  import { IconPencil, IconPlus, IconAlertTriangle, IconX } from "@tabler/icons-svelte"
   import { fade } from "svelte/transition"
 
   let {
@@ -135,7 +136,7 @@
     {/if}
   {:else}
     <button class="btn btn-sm btn-neutral join-item" disabled>
-      <IconLoader /> Loading...
+      <Spinny /> Loading...
     </button>
   {/if}
 </div>
@@ -315,7 +316,7 @@
       {/if}
     {:else}
       <button onclick={() => (mode = "view")} class="btn btn-sm btn-neutral join-item" disabled>
-        <IconLoader /> Loading...
+        <Spinny /> Loading...
       </button>
     {/if}
   </div>

diff --git a/src/components/dash/members/edit/MemberViewEdit.svelte b/src/components/dash/members/edit/MemberViewEdit.svelte
@@ -7,9 +7,10 @@
   import EditField from "$components/dash/edit/EditField.svelte"
   import EditImage from "$components/dash/edit/EditImage.svelte"
   import SubmitEditButton from "$components/dash/edit/SubmitEditButton.svelte"
+  import Spinny from "$components/Spinny.svelte"
   import { type DashList } from "$lib/dash/dash.svelte"
   import { createViewEditState } from "$lib/dash/member/edit.svelte"
-  import { IconLoader, IconX } from "@tabler/icons-svelte"
+  import { IconX } from "@tabler/icons-svelte"
   import { fade } from "svelte/transition"
 
   let {
@@ -72,7 +73,7 @@
     {/if}
   {:else}
     <button onclick={() => (mode = "view")} class="btn btn-sm btn-neutral join-item" disabled>
-      <IconLoader /> Loading...
+      <Spinny /> Loading...
     </button>
   {/if}
 </div>
@@ -186,7 +187,7 @@
       {/if}
     {:else}
       <button onclick={() => (mode = "view")} class="btn btn-sm btn-neutral join-item" disabled>
-        <IconLoader /> Loading...
+        <Spinny /> Loading...
       </button>
     {/if}
   </div>

diff --git a/src/components/dash/system/edit/SystemInfoEdit.svelte b/src/components/dash/system/edit/SystemInfoEdit.svelte
@@ -2,9 +2,9 @@
   import type { System, SystemPrivacy } from "$api/types"
   import EditPrivacy from "$components/dash/edit/EditPrivacy.svelte"
   import SubmitEditButton from "$components/dash/edit/SubmitEditButton.svelte"
-  import { dash } from "$lib/dash/dash.svelte"
+  import Spinny from "$components/Spinny.svelte"
   import { createInfoEditState } from "$lib/dash/system/edit.svelte"
-  import { IconLoader, IconX } from "@tabler/icons-svelte"
+  import { IconX } from "@tabler/icons-svelte"
   import { fade } from "svelte/transition"
 
   let {
@@ -86,7 +86,7 @@
     {/if}
   {:else}
     <button class="btn btn-sm btn-neutral join-item" disabled>
-      <IconLoader /> Loading...
+      <Spinny /> Loading...
     </button>
   {/if}
 </div>
@@ -223,7 +223,7 @@
       {/if}
     {:else}
       <button onclick={() => (mode = "view")} class="btn btn-sm btn-neutral join-item" disabled>
-        <IconLoader /> Loading...
+        <Spinny /> Loading...
       </button>
     {/if}
   </div>

diff --git a/src/components/dash/system/edit/SystemViewEdit.svelte b/src/components/dash/system/edit/SystemViewEdit.svelte
@@ -5,8 +5,9 @@
   import EditField from "$components/dash/edit/EditField.svelte"
   import EditImage from "$components/dash/edit/EditImage.svelte"
   import SubmitEditButton from "$components/dash/edit/SubmitEditButton.svelte"
+  import Spinny from "$components/Spinny.svelte"
   import { createViewEditState } from "$lib/dash/system/edit.svelte"
-  import { IconLoader, IconX } from "@tabler/icons-svelte"
+  import { IconX } from "@tabler/icons-svelte"
   import { fade } from "svelte/transition"
 
   let {
@@ -57,7 +58,7 @@
     {/if}
   {:else}
     <button onclick={() => (mode = "view")} class="btn btn-sm btn-neutral join-item" disabled>
-      <IconLoader /> Loading...
+      <Spinny /> Loading...
     </button>
   {/if}
 </div>
@@ -147,7 +148,7 @@
       {/if}
     {:else}
       <button onclick={() => (mode = "view")} class="btn btn-sm btn-neutral join-item" disabled>
-        <IconLoader /> Loading...
+        <Spinny /> Loading...
       </button>
     {/if}
   </div>