From a443b3ddbc82dd63c05edc0b08b82082f82d1d76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julian=20T=C3=B6lle?= <julian.toelle97@gmail.com>
Date: Sat, 25 Jun 2022 18:26:28 +0200
Subject: [PATCH] feat(frontend): nice login loading screen

---
 frontend/src/App.tsx                     |  3 ++-
 frontend/src/components/LoginLoading.tsx | 18 ++++++++++++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/LoginLoading.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 09570eb..874953f 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { Route, Routes } from "react-router-dom";
 import { Footer } from "./components/Footer";
 import { LoginFailure } from "./components/LoginFailure";
+import { LoginLoading } from "./components/LoginLoading";
 import { LoginSuccess } from "./components/LoginSuccess";
 import { NavBar } from "./components/NavBar";
 import { RecentListens } from "./components/RecentListens";
@@ -16,7 +17,7 @@ export function App() {
   const { isLoaded } = useAuth();
 
   if (!isLoaded) {
-    return <div>Loading...</div>;
+    return <LoginLoading />;
   }
 
   return (
diff --git a/frontend/src/components/LoginLoading.tsx b/frontend/src/components/LoginLoading.tsx
new file mode 100644
index 0000000..b98f4c1
--- /dev/null
+++ b/frontend/src/components/LoginLoading.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import { Spinner } from "./Spinner";
+
+export const LoginLoading: React.FC = () => (
+  <main className="md:flex md:justify-center p-4">
+    <div className="md:shrink-0 min-w-full md:min-w-0 md:w-1/3 l:w-1/5 xl:w-1/6 max-w-screen-lg shadow-xl bg-gray-100 rounded-lg m-2">
+      <div className="text-white bg-green-500 rounded-lg rounded-b-none text-center mb-4 p-6">
+        <span className="font-semibold text-xl tracking-tight">Listory</span>
+      </div>
+      <p className="text-2xl font-extralight text-gray-700 text-center p-6">
+        Logging in
+      </p>
+      <Spinner className="p-6" size={128} />
+    </div>
+  </main>
+);
+
+<div className="shadow-xl bg-gray-100 rounded p-5 m-2"></div>;