From 85e4c5349b674e308552e894cf09a88830043c61 Mon Sep 17 00:00:00 2001
From: Thomas Ruoff <ThomasRuoff@gmail.com>
Date: Fri, 25 Dec 2020 00:22:02 +0100
Subject: [PATCH] add spinner and loading wrapper

---
 components/loading.tsx | 20 ++++++++++++++++++++
 components/spinner.tsx | 24 ++++++++++++++++++++++++
 2 files changed, 44 insertions(+)
 create mode 100644 components/loading.tsx
 create mode 100644 components/spinner.tsx

diff --git a/components/loading.tsx b/components/loading.tsx
new file mode 100644
index 0000000..fb53a3d
--- /dev/null
+++ b/components/loading.tsx
@@ -0,0 +1,20 @@
+import Spinner from './spinner'
+
+export default function Loading({
+  loading,
+  children,
+}: {
+  loading: boolean
+  children: any
+}) {
+  return (
+    <div data-testid="wrapper" className="relative">
+      <div className={loading && 'opacity-50'}>{children}</div>
+      {loading && (
+        <div className="absolute inset-0 w-full h-full flex justify-center items-center pointer-events-node">
+          <Spinner />
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/components/spinner.tsx b/components/spinner.tsx
new file mode 100644
index 0000000..4adcc23
--- /dev/null
+++ b/components/spinner.tsx
@@ -0,0 +1,24 @@
+export default function Spinner() {
+  return (
+    <svg
+      className="animate-spin -ml-1 mr-3 h-5 w-5 text-blue-800"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="4"
+      ></circle>
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      ></path>
+    </svg>
+  )
+}