Rotate icon on loader screen

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/)

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

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;
+}

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>
     );