From a6248817917c9caee33600c5c1762e20461d5fda Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Fri, 15 Sep 2023 09:50:18 +0200
Subject: [PATCH] Update spinners

---
 assets/media/styles.css                       | 37 --------------
 .../components/Common/Spinner.tsx             | 22 +++-----
 src/localization/localization.enum.ts         |  2 +-
 src/panelWebView/components/Spinner.tsx       |  6 ++-
 src/panelWebView/styles.css                   | 50 +++++++++++++++++++
 tailwind.config.js                            |  7 +++
 6 files changed, 70 insertions(+), 54 deletions(-)

diff --git a/assets/media/styles.css b/assets/media/styles.css
index d8e8f4a1..fd384c80 100644
--- a/assets/media/styles.css
+++ b/assets/media/styles.css
@@ -66,43 +66,6 @@
   padding: 1rem 1.25rem;
 }
 
-.spinner,
-.spinner:before,
-.spinner:after {
-  border-radius: 50%;
-  width: 2em;
-  height: 2em;
-  animation-fill-mode: both;
-  animation: load7 1.8s infinite ease-in-out;
-}
-
-.spinner {
-  color: var(--vscode-panelSectionHeader-foreground);
-  font-size: 10px;
-  margin: 80px auto;
-  position: relative;
-  text-indent: -9999em;
-  transform: translateZ(0);
-  animation-delay: -0.16s;
-}
-
-.spinner:before,
-.spinner:after {
-  content: '';
-  position: absolute;
-  top: 0;
-}
-
-.spinner:before {
-  left: -3.5em;
-  -webkit-animation-delay: -0.32s;
-  animation-delay: -0.32s;
-}
-
-.spinner:after {
-  left: 3.5em;
-}
-
 .frontmatter {
   padding-top: 0;
   padding-bottom: var(--input-margin-vertical);
diff --git a/src/dashboardWebView/components/Common/Spinner.tsx b/src/dashboardWebView/components/Common/Spinner.tsx
index 6cf166df..0b87e2a0 100644
--- a/src/dashboardWebView/components/Common/Spinner.tsx
+++ b/src/dashboardWebView/components/Common/Spinner.tsx
@@ -1,23 +1,17 @@
 import * as React from 'react';
-import useThemeColors from '../../hooks/useThemeColors';
 
 export interface ISpinnerProps { }
 
 export const Spinner: React.FunctionComponent<ISpinnerProps> = (
-  props: React.PropsWithChildren<ISpinnerProps>
+  _: React.PropsWithChildren<ISpinnerProps>
 ) => {
-  const { getColors } = useThemeColors();
-
   return (
-    <div
-      className={`fixed top-0 left-0 right-0 bottom-0 w-full h-full flex flex-wrap items-center justify-center z-50 ${getColors(
-        `bg-black bg-opacity-50`,
-        `bg-[var(--vscode-editor-background)] opacity-75`
-      )
-        }`}
-    >
-      <div className={`loader ease-linear rounded-full border-8 border-t-8 h-16 w-16 ${getColors(`border-gray-50 border-t-teal-500`, `border-[var(--vscode-activityBar-inactiveForeground)] border-t-[var(--vscode-activityBarBadge-background)]`)
-        }`} />
+    <div className={`z-50 fixed top-0 left-0 right-0 bottom-0 w-full h-full bg-[var(--vscode-editor-background)] opacity-75`}>
+      <div
+        className={`absolute top-0 w-full h-[2px] `}
+      >
+        <div className={`h-full absolute rounded-sm bg-[var(--vscode-activityBarBadge-background)] animate-[vscode-loader_4s_ease-in-out_infinite]`} />
+      </div>
     </div>
   );
-};
+};
\ No newline at end of file
diff --git a/src/localization/localization.enum.ts b/src/localization/localization.enum.ts
index fbe3d607..94335b70 100644
--- a/src/localization/localization.enum.ts
+++ b/src/localization/localization.enum.ts
@@ -932,7 +932,7 @@ export enum LocalizationKey {
    */
   dashboardWelcomeScreenActionsThanks = 'dashboard.welcomeScreen.actions.thanks',
   /**
-   * Found the following unmapped files. Do you want to remap the metadata?
+   * Do you want to remap the metadata of unmapped files?
    */
   dashboardMediaDetailsSlideOverUnmappedDescription = 'dashboard.media.detailsSlideOver.unmapped.description',
   /**
diff --git a/src/panelWebView/components/Spinner.tsx b/src/panelWebView/components/Spinner.tsx
index 73199b02..b81380dc 100644
--- a/src/panelWebView/components/Spinner.tsx
+++ b/src/panelWebView/components/Spinner.tsx
@@ -8,8 +8,10 @@ const Spinner: React.FunctionComponent<ISpinnerProps> = (
   _: React.PropsWithChildren<ISpinnerProps>
 ) => {
   return (
-    <div className="spinner">
-      {l10n.t(LocalizationKey.panelSpinnerLoading)}
+    <div className="vscode__loader">
+      <div className="vscode__loader__bar">
+        <div className="vscode__loader__bar__animation"></div>
+      </div>
     </div>
   );
 };
diff --git a/src/panelWebView/styles.css b/src/panelWebView/styles.css
index 6ff892f9..e90a513b 100644
--- a/src/panelWebView/styles.css
+++ b/src/panelWebView/styles.css
@@ -8,6 +8,26 @@
   }
 }
 
+@keyframes vscode-loader {
+  0% {
+    left: 0;
+    width: 30px;
+  }
+  25% {
+    width: 50px;
+  }
+  50% {
+    width: 20px;
+  }
+  75% {
+    width: 50px;
+  }
+  100% {
+    width: 20px;
+    left: 100%;
+  }
+}
+
 /* Overrides */
 vscode-button,
 button {
@@ -1122,3 +1142,33 @@ vscode-divider {
   text-align: center;
   padding: 1rem 1.25rem;
 }
+
+/* VSCode loader */
+.vscode__loader {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--vscode-sideBar-background);
+  opacity: 75%;
+  z-index: 50;
+
+  .vscode__loader__bar {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 2px;
+
+    .vscode__loader__bar__animation {
+      height: 100%;
+      position: absolute;
+      border-radius: 2px;
+      background-color: var(--vscode-activityBarBadge-background);
+
+      animation: vscode-loader 4s ease-in-out infinite;
+    }
+  }
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 0b5d0d8b..1addc4f6 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -14,6 +14,13 @@ module.exports = {
           from: {
             transform: 'rotate(360deg)'
           },
+        },
+        'vscode-loader': {
+          '0%': { left: '0', width: '30px' },
+          '25%': { width: '50px' },
+          '50%': { width: '20px' },
+          '75%': { width: '50px' },
+          '100%': { width: '20px', left: '100%' }
         }
       },
       colors: {