feat(frontend): improve loading spinner

frontend/package-lock.json

@@ -11292,6 +11292,24 @@
         "postcss-values-parser": "^2.0.0"
       }
     },
+    "postcss-import": {
+      "version": "12.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-12.0.1.tgz",
+      "integrity": "sha512-3Gti33dmCjyKBgimqGxL3vcV8w9+bsHwO5UrBawp796+jdardbcFl4RP5w/76BwNL7aGzpKstIfF9I+kdE8pTw==",
+      "requires": {
+        "postcss": "^7.0.1",
+        "postcss-value-parser": "^3.2.3",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "dependencies": {
+        "postcss-value-parser": {
+          "version": "3.3.1",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
+          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ=="
+        }
+      }
+    },
     "postcss-initial": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/postcss-initial/-/postcss-initial-3.0.2.tgz",

frontend/package.json

@@ -22,6 +22,7 @@
     "date-fns": "2.13.0",
     "npm-run-all": "4.1.5",
     "postcss-cli": "7.1.1",
+    "postcss-import": "^12.0.1",
     "prettier": "2.0.5",
     "react": "16.13.1",
     "react-dom": "16.13.1",

frontend/postcss.config.js

@@ -8,8 +8,10 @@ const purgecss = require("@fullhuman/postcss-purgecss")({
 
 module.exports = {
   plugins: [
+    require("postcss-import"),
     require("tailwindcss"),
     require("autoprefixer"),
+
     ...(process.env.NODE_ENV === "production" ? [purgecss] : []),
   ],
 };

frontend/src/components/ReportListens.tsx

@@ -78,7 +78,7 @@ export const ReportListens: React.FC = () => {
           </div>
           {isLoading && (
             <div>
-              <span>Loading Listens</span>
+              <div className="loader rounded-full border-8 h-64 w-64"></div>
             </div>
           )}
           {report.length === 0 && (

frontend/src/loader.css

@@ -0,0 +1,23 @@
+.loader {
+  border-top-color: theme("colors.green.500");
+  -webkit-animation: spinner 1.5s linear infinite;
+  animation: spinner 1.5s linear infinite;
+}
+
+@-webkit-keyframes spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@keyframes spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

frontend/src/tailwind.css

@@ -1,3 +1,5 @@
+@import "loader.css";
+
 @tailwind base;
 
 @tailwind components;