From 9487deed99cc9d87844a4de52fec437cd9e9e239 Mon Sep 17 00:00:00 2001
From: mbecker20 <becker.maxh@gmail.com>
Date: Tue, 29 Mar 2022 18:14:39 -0700
Subject: [PATCH] loading component

---
 frontend/package.json                         |   4 +-
 .../src/components/util/loading/Loading.tsx   |  40 +++++
 frontend/src/components/util/loading/css.ts   | 138 ++++++++++++++++++
 3 files changed, 180 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/util/loading/Loading.tsx
 create mode 100644 frontend/src/components/util/loading/css.ts

diff --git a/frontend/package.json b/frontend/package.json
index aec5d616d..3d2568ab2 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,10 +9,10 @@
   },
   "license": "GPL v3.0",
   "devDependencies": {
+    "@monitor/types": "1.0.0",
     "typescript": "^4.6.2",
     "vite": "^2.8.6",
-    "vite-plugin-solid": "^2.2.6",
-    "@monitor/types": "1.0.0"
+    "vite-plugin-solid": "^2.2.6"
   },
   "dependencies": {
     "axios": "^0.26.1",
diff --git a/frontend/src/components/util/loading/Loading.tsx b/frontend/src/components/util/loading/Loading.tsx
new file mode 100644
index 000000000..fba45e2a1
--- /dev/null
+++ b/frontend/src/components/util/loading/Loading.tsx
@@ -0,0 +1,40 @@
+import { Component, Match, Switch } from "solid-js";
+import { sonarCss, spinnerCss, threeDotsCss } from "./css";
+
+export type LoadingType = "three-dot" | "sonar" | "spinner";
+
+const Loading: Component<{ type: LoadingType; scale?: number }> = (p) => {
+  return (
+    <Switch>
+      <Match when={p.type === "three-dot"}>
+        <style>{threeDotsCss(p.scale)}</style>
+        <div class="ThreeDot">
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+        </div>
+      </Match>
+      <Match when={p.type === "sonar"}>
+        <style>{sonarCss(p.scale)}</style>
+        <div class="Sonar">
+          <div></div>
+          <div></div>
+        </div>
+      </Match>
+      <Match when={p.type === "spinner"}>
+        <>
+          <style>{spinnerCss(p.scale)}</style>
+          <div class="Spinner">
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+          </div>
+        </>
+      </Match>
+    </Switch>
+  );
+};
+
+export default Loading;
diff --git a/frontend/src/components/util/loading/css.ts b/frontend/src/components/util/loading/css.ts
new file mode 100644
index 000000000..12a3cc183
--- /dev/null
+++ b/frontend/src/components/util/loading/css.ts
@@ -0,0 +1,138 @@
+/* CSS from https://loading.io/css/ */
+
+export function spinnerCss(scale = 0.5) {
+  return `
+    .Spinner {
+      display: inline-block;
+      position: relative;
+      width: ${80 * scale}px;
+      height: ${80 * scale}px;
+    }
+    .Spinner div {
+      box-sizing: border-box;
+      display: block;
+      position: absolute;
+      width: ${64 * scale}px;
+      height: ${64 * scale}px;
+      margin: ${8 * scale}px;
+      border: ${8 * scale}px solid #fff;
+      border-radius: 50%;
+      animation: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+      border-color: #fff transparent transparent transparent;
+    }
+    .Spinner div:nth-child(1) {
+      animation-delay: -0.45s;
+    }
+    .Spinner div:nth-child(2) {
+      animation-delay: -0.3s;
+    }
+    .Spinner div:nth-child(3) {
+      animation-delay: -0.15s;
+    }
+    @keyframes spinner {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+  `;
+}
+
+export function sonarCss(scale = 0.5) {
+	return `
+		.Sonar {
+			display: inline-block;
+			position: relative;
+			width: ${80 * scale}px;
+      height: ${80 * scale}px;
+		}
+		.Sonar div {
+			position: absolute;
+			border: ${4 * scale}px solid #fff;
+			opacity: 1;
+			border-radius: 50%;
+			animation: sonar 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+		}
+		.Sonar div:nth-child(2) {
+			animation-delay: -0.5s;
+		}
+		@keyframes sonar {
+			0% {
+				top: ${36 * scale}px;
+				left: ${36 * scale}px;
+				width: 0;
+				height: 0;
+				opacity: 1;
+			}
+			100% {
+				top: 0px;
+				left: 0px;
+				width: ${72 * scale}px;
+				height: ${72 * scale}px;
+				opacity: 0;
+			}
+		}
+	`;
+}
+
+export function threeDotsCss(scale = 0.5) {
+	return `
+		.ThreeDot {
+			display: inline-block;
+			position: relative;
+			width: ${80 * scale}px;
+      height: ${80 * scale}px;
+		}
+		.ThreeDot div {
+			position: absolute;
+			top: ${33 * scale}px;
+			width: ${13 * scale}px;
+			height: ${13 * scale}px;
+			border-radius: 50%;
+			background: #fff;
+			animation-timing-function: cubic-bezier(0, 1, 1, 0);
+		}
+		.ThreeDot div:nth-child(1) {
+			left: ${8 * scale}px;
+			animation: three-dot1 0.6s infinite;
+		}
+		.ThreeDot div:nth-child(2) {
+			left: ${8 * scale}px;
+			animation: three-dot2 0.6s infinite;
+		}
+		.ThreeDot div:nth-child(3) {
+			left: ${32 * scale}px;
+			animation: three-dot2 0.6s infinite;
+		}
+		.ThreeDot div:nth-child(4) {
+			left: ${56 * scale}px;
+			animation: three-dot3 0.6s infinite;
+		}
+		@keyframes three-dot1 {
+			0% {
+				transform: scale(0);
+			}
+			100% {
+				transform: scale(1);
+			}
+		}
+		@keyframes three-dot2 {
+			0% {
+				transform: translate(0, 0);
+			}
+			100% {
+				transform: translate(${24 * scale}px, 0);
+			}
+		}
+		@keyframes three-dot3 {
+			0% {
+				transform: scale(1);
+			}
+			100% {
+				transform: scale(0);
+			}
+		}
+	`;
+}