feat: add basic layout styles, add home link on the logo, add global loading indicator

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>
+    <div className={"p-6 mx-auto max-w-screen-lg"}>
-      <header>
+      <header className={"flex items-center justify-between"}>
-        <h1>Header</h1>
+        <h1>
+          <Link to={"/"}>Podcaster</Link>
+        </h1>
+        {isLoading && <Spinner />}
       </header>
       <main>
         <Outlet />

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);
+  }
+}

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>;
+}