From efeee4758850b7b43828f4ed17e226c4de37962b Mon Sep 17 00:00:00 2001
From: andres <andres99.dev@gmail.com>
Date: Sat, 20 Apr 2024 23:17:29 +0200
Subject: [PATCH] feat: add basic layout styles, add home link on the logo, add
 global loading indicator

---
 src/components/layout.tsx         | 16 ++++++++++++----
 src/components/spinner.module.css | 19 +++++++++++++++++++
 src/components/spinner.tsx        |  5 +++++
 3 files changed, 36 insertions(+), 4 deletions(-)
 create mode 100644 src/components/spinner.module.css
 create mode 100644 src/components/spinner.tsx

diff --git a/src/components/layout.tsx b/src/components/layout.tsx
index a8ebe41..34876c4 100644
--- a/src/components/layout.tsx
+++ b/src/components/layout.tsx
@@ -1,10 +1,18 @@
-import { Outlet } from "react-router-dom";
+import { Link, Outlet } from "react-router-dom";
+import { Spinner } from "./spinner";
+import { useIsFetching } from "@tanstack/react-query";
 
 export function Layout() {
+  const fetching = useIsFetching();
+  const isLoading = fetching > 0;
+
   return (
-    <div>
-      <header>
-        <h1>Header</h1>
+    <div className={"p-6 mx-auto max-w-screen-lg"}>
+      <header className={"flex items-center justify-between"}>
+        <h1>
+          <Link to={"/"}>Podcaster</Link>
+        </h1>
+        {isLoading && <Spinner />}
       </header>
       <main>
         <Outlet />
diff --git a/src/components/spinner.module.css b/src/components/spinner.module.css
new file mode 100644
index 0000000..8438a39
--- /dev/null
+++ b/src/components/spinner.module.css
@@ -0,0 +1,19 @@
+.loader {
+  width: 24px;
+  height: 24px;
+  border: 3px solid #fff;
+  border-bottom-color: #ff3d00;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/components/spinner.tsx b/src/components/spinner.tsx
new file mode 100644
index 0000000..6c4ff96
--- /dev/null
+++ b/src/components/spinner.tsx
@@ -0,0 +1,5 @@
+import s from "./spinner.module.css";
+
+export function Spinner() {
+  return <span className={s.loader} aria-busy={"true"}></span>;
+}