From b96824f86f9ed4ea8517422df1a8171d3b25fd9e Mon Sep 17 00:00:00 2001
From: 0x1eef <0x1eef@protonmail.com>
Date: Mon, 2 Sep 2024 19:08:07 -0300
Subject: [PATCH] Rotate icon on loader screen

---
 README.md                 |  6 ++++++
 share/wimi/CHANGELOG      |  4 ++++
 src/css/index.css         | 13 +++++++++++++
 src/js/components/App.tsx |  2 +-
 4 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 729a61c..9215c92 100644
--- a/README.md
+++ b/README.md
@@ -46,6 +46,12 @@ the extension can be added to the browser from `about:addons`.
 * [GitHub](https://github.com/0x1eef/wimi#readme)
 * [GitLab](https://gitlab.com/0x1eef/wimi#about)
 
+## Credit
+
+The extension includes icons that have been downloaded
+via my premium account on [flaticon](https://www.flaticon.com).
+Credit to the original graphic artists
+
 ## License
 
 [BSD Zero Clause](https://choosealicense.com/licenses/0bsd/)
diff --git a/share/wimi/CHANGELOG b/share/wimi/CHANGELOG
index 96d38ea..3bbe0fa 100644
--- a/share/wimi/CHANGELOG
+++ b/share/wimi/CHANGELOG
@@ -2,6 +2,10 @@
 
 ** vNEXT
 
+**** Rotate icon on loader screen
+The icon shown on the loader screen now slowly rotates
+to help indicate the loading state
+
 **** Replace ISP details with location details
 We now show the location details associated with an IP -
 usually a city and country
diff --git a/src/css/index.css b/src/css/index.css
index 8f4a6ae..0ce0c52 100644
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -15,3 +15,16 @@ body {
   background: var(--primary-color);
   color: var(--secondary-color);
 }
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+img[data-testid="spin"] {
+  animation: rotate 2s linear infinite;
+}
diff --git a/src/js/components/App.tsx b/src/js/components/App.tsx
index 472cd02..d1de92e 100644
--- a/src/js/components/App.tsx
+++ b/src/js/components/App.tsx
@@ -28,7 +28,7 @@ export function App() {
     return (
       <div data-testid="loading" className="h-14 flex flex-col justify-center">
         <div className="flex flex-col items-center h-full min-w-48 justify-center">
-          <img className="w-8 h-8" src={`/images/icon.svg`} />
+          <img data-testid="spin" className="w-8 h-8" src="/images/icon.svg" />
         </div>
       </div>
     );