🐛 Fix loader position while verifying token

frontend/resources/styles/common/refactor/basic-rules.scss

@@ -600,6 +600,22 @@
   color: var(--modal-button-foreground-color-error);
 }
 
+.loader-base {
+  @include flexCenter;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 100vw;
+  z-index: $z-index-alert;
+  background-color: var(--loader-background);
+  :global(svg#loader-pencil) {
+    height: $s-100;
+    width: $s-100;
+    animation: loaderColor 5s infinite ease;
+    fill: var(--icon-foreground);
+  }
+}
 // UI ELEMENTS
 .asset-element {
   @include titleTipography;

frontend/src/app/main/ui/auth/verify_token.scss

@@ -5,3 +5,7 @@
 // Copyright (c) KALEIDOS INC
 
 @use "./common.scss";
+
+.verify-token {
+  @extend .loader-base;
+}

frontend/src/app/main/ui/loader.cljs

@@ -5,6 +5,7 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.loader
+  (:require-macros [app.main.style :as stl])
   (:require
    [app.main.store :as st]
    [app.main.ui.icons :as i]
@@ -15,4 +16,5 @@
 (mf/defc loader
   []
   (when (mf/deref st/loader)
-    [:div.loader-content i/loader-pencil]))
+    [:div {:class (stl/css :loader-content)}
+     i/loader-pencil]))

frontend/src/app/main/ui/loader.scss

@@ -0,0 +1,11 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@import "refactor/common-refactor.scss";
+
+.loader-content {
+  @extend .loader-base;
+}

frontend/src/app/main/ui/viewer.cljs

@@ -607,6 +607,6 @@
     (let [props (obj/merge props #js {:data data :key (dm/str file-id)})]
       [:> viewer-content props])
 
-    [:div.loader-content.viewer-loader
+    [:div {:class (stl/css :loader-content)}
      i/loader-pencil]))
 

frontend/src/app/main/ui/viewer.scss

@@ -175,8 +175,8 @@
   }
 }
 
-:global(svg#loader-pencil) {
+.loader-content {
-  fill: var(--icon-foreground);
+  @extend .loader-base;
 }
 
 /** FULLSCREEN */

frontend/src/app/main/ui/workspace.scss

@@ -30,9 +30,7 @@
   grid-template-columns: auto 1fr auto;
 
   .workspace-loader {
-    display: flex;
+    @include flexCenter;
-    justify-content: center;
-    align-items: center;
     grid-area: viewport;
     background-color: var(--loader-background);
     :global(svg#loader-pencil) {