fix: Prevent loader svg FOUC

kiosion · Oct 4, 2023 · 02225ad · 02225ad
1 parent 83f3101
commit 02225ad
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/svelte-app/src/app.html b/svelte-app/src/app.html
@@ -2,12 +2,6 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;1,100;1,200;1,300;1,400&display=swap"
-      rel="stylesheet"
-    />
     <link rel="icon" href="%sveltekit.assets%/favicon.ico" />
     <link rel="favicon" href="%sveltekit.assets%/favicon.ico" />
     <link rel="icon" href="%sveltekit.assets%/favicon-16x16.png" sizes="16x16" />
@@ -17,7 +11,13 @@
     <link rel="android-chrome" href="%sveltekit.assets%/android-chrome-512x512.png" sizes="512x512" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="og:icon" content="%sveltekit.assets%/android-chrome-512x512.png" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     %sveltekit.head%
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Ubuntu+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Work+Sans:ital,wght@0,100;0,200;0,300;0,400;1,100;1,200;1,300;1,400&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="svelte" style="display:contents;">%sveltekit.body%</div>

diff --git a/svelte-app/src/components/loading/spinner.svelte b/svelte-app/src/components/loading/spinner.svelte
@@ -1,18 +1,18 @@
 <svg
-  class="-ml-1 mt-0.5 h-5 w-5 animate-spin text-accent-light dark:text-accent-dark {$$props.class ||
+  class="-ml-1 mt-0.5 h-5 w-5 animate-spin text-accent-light !opacity-100 dark:text-accent-dark {$$props.class ||
     ''}"
+  style="opacity:0"
   xmlns="http://www.w3.org/2000/svg"
   fill="none"
   viewBox="0 0 24 24"
 >
   <circle
-    class="!opacity-25"
+    class="opacity-25"
     cx="12"
     cy="12"
     r="10"
     stroke="currentColor"
     stroke-width="4"
-    style="opacity: 0;"
   />
   <path
     class="opacity-75"