From efe5674d04e954f667b320d4c5468f18fda5afc6 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Wed, 2 Apr 2025 03:01:46 +0200
Subject: [PATCH] fix(front): proper loader

---
 front/src/components/ui/Loader.vue  |   4 +-
 front/src/components/ui/loader.scss | 102 ++++++++++++++--------------
 2 files changed, 54 insertions(+), 52 deletions(-)

diff --git a/front/src/components/ui/Loader.vue b/front/src/components/ui/Loader.vue
index e87915789..65a5e6941 100644
--- a/front/src/components/ui/Loader.vue
+++ b/front/src/components/ui/Loader.vue
@@ -7,14 +7,14 @@ const { container = true } = defineProps<{ container?: boolean }>()
     v-if="container"
     class="funkwhale loader-container"
   >
-    <div class="funkwhale loader">
+    <div class="funkwhale">
       <div class="loader" />
     </div>
   </div>
 
   <div
     v-else
-    class="funkwhale loader"
+    class="funkwhale"
   >
     <div class="loader" />
   </div>
diff --git a/front/src/components/ui/loader.scss b/front/src/components/ui/loader.scss
index 657088084..2ef097bfd 100644
--- a/front/src/components/ui/loader.scss
+++ b/front/src/components/ui/loader.scss
@@ -1,60 +1,62 @@
+// Modified version of https://github.com/lukehaas/css-loaders
+
 .funkwhale {
   &.loader-container {
     position: relative;
     height: 100%;
-  }
-
-  &.loader {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-
     display: flex;
     justify-content: center;
     align-items: center;
-
-    font-size: 1.2em;
-
-    // Modified version of https://github.com/lukehaas/css-loaders
-    > .loader,
-    > .loader:after {
-      border-radius: 50%;
-      width: 1em;
-      height: 1em;
-    }
-
-    > .loader:after {
-      content: '';
-      position: absolute;
-      display: block;
-      border: .11em solid currentColor;
-      opacity: 0.2;
-      margin-left: -0.11em;
-      margin-top: -0.11em;
-    }
-
-    > .loader {
-      position: relative;
-
-      text-indent: -9999em;
-      font-size: 1em;
-
-      border-top: .11em solid transparent;
-      border-right: .11em solid transparent;
-      border-bottom: .11em solid transparent;
-      border-left: .11em solid currentColor;
-
-      will-change: transform;
-      transform: rotate(0deg);
-      animation: rotate .5s infinite linear;
-
-      @keyframes rotate {
-        0% { transform: rotate(0deg); }
-        100% { transform: rotate(360deg); }
-      }
-    }
   }
 
+  .loader,
+  .loader:after {
+    border-radius: 50%;
+    width: 1.5em;
+    height: 1.5em;
+  }
+  .loader {
+    font-size: 1.2em;
+    position: relative;
+    text-indent: -9999em;
+
+    @include light-theme {
+      border-top: 0.2em solid rgba(0, 0, 0, 0.2);
+      border-right: 0.2em solid rgba(0, 0, 0, 0.2);
+      border-bottom: 0.2em solid rgba(0, 0, 0, 0.2);
+      border-left: 0.2em solid rgba(0, 0, 0, 0.7);
+    }
+
+    @include dark-theme {
+      border-top: 0.2em solid rgba(255, 255, 255, 0.2);
+      border-right: 0.2em solid rgba(255, 255, 255, 0.2);
+      border-bottom: 0.2em solid rgba(255, 255, 255, 0.2);
+      border-left: 0.2em solid rgba(255, 255, 255, 0.7);
+    }
+    -webkit-transform: translateZ(0);
+    -ms-transform: translateZ(0);
+    transform: translateZ(0);
+    -webkit-animation: load8 .5s infinite linear;
+    animation: load8 .5s infinite linear;
+  }
+  @-webkit-keyframes load8 {
+    0% {
+      -webkit-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes load8 {
+    0% {
+      -webkit-transform: rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      -webkit-transform: rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
 }