apricote/Listory
1
0
Fork 0
mirror of https://github.com/apricote/Listory.git synced 2026-01-13 21:21:02 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat(frontend): nice login loading screen

Browse source
This commit is contained in:
Julian Tölle 2022-06-25 18:26:28 +02:00
parent 01ed0c5491
commit a443b3ddbc
2 changed files with 20 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

3
frontend/src/App.tsx
View file

@ -2,6 +2,7 @@ import React from "react";
import { Route, Routes } from "react-router-dom"; import { Route, Routes } from "react-router-dom";
import { Footer } from "./components/Footer"; import { Footer } from "./components/Footer";
import { LoginFailure } from "./components/LoginFailure"; import { LoginFailure } from "./components/LoginFailure";
import { LoginLoading } from "./components/LoginLoading";
import { LoginSuccess } from "./components/LoginSuccess"; import { LoginSuccess } from "./components/LoginSuccess";
import { NavBar } from "./components/NavBar"; import { NavBar } from "./components/NavBar";
import { RecentListens } from "./components/RecentListens"; import { RecentListens } from "./components/RecentListens";
@ -16,7 +17,7 @@ export function App() {
const { isLoaded } = useAuth(); const { isLoaded } = useAuth();
if (!isLoaded) { if (!isLoaded) {
return <div>Loading...</div>; return <LoginLoading />;
} }
return ( return (

18
frontend/src/components/LoginLoading.tsx Normal file
View file

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