Add loading overlay

.talismanrc

@@ -14,7 +14,7 @@ fileignoreconfig:
 - filename: app/routes/login.tsx
   checksum: 71439f7a400334caeb550ee897753dec4b8d36ded11952b3b81594b745aaa18b
 - filename: app/components/troi.client.tsx
-  checksum: aab99fc3f4f2284848510075ccfc612122cb572eb56f2e531d78ce42613f52e7
+  checksum: c9435fd1d18506312bf7c1fce449becc26079aa7af12c2fce92c8b4485c0a989
 - filename: app/routes/projects.tsx
   checksum: 68dde5f568d7d4a01c207d5bc6fb95976b1bfe469ad7614ad71241fce8820130
 - filename: app/troi/useTroi.hook.tsx

app/components/LoadingOverlay.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+
+interface Props {
+  message: ReactNode;
+}
+
+export function LoadingOverlay({ message }: Props) {
+  return (
+    <div className="fixed bottom-0 left-0 right-0 top-0 z-10 flex flex-col items-center justify-center bg-slate-400 bg-opacity-50">
+      <div
+        className="h-16 w-16 animate-spin rounded-full border-b-2 border-t-2 border-gray-900"
+        data-testid="loadingOverlay"
+      />
+      <div className="mt-8">{message}</div>
+    </div>
+  );
+}

app/components/troi.client.tsx

@@ -1,4 +1,5 @@
 import { useTroi } from "~/troi/useTroi.hook";
+import { LoadingOverlay } from "./LoadingOverlay";
 
 interface Props {
   username: string;
@@ -11,5 +12,28 @@ export default function Troi(props: Props) {
     props.password,
   );
 
+  return (
+    <div>
+      {loading && <LoadingOverlay message={"Please wait..."} />}
+
+      <section className="p-4">
+        <a
+          className="angie-link"
+          href="https://digitalservicebund.atlassian.net/wiki/spaces/DIGITALSER/pages/359301512/Time+Tracking"
+          target="_blank"
+        >
+          Read about how to track your time in confluence
+        </a>
+      </section>
+
+      <section className="mt-8 text-xs text-gray-600">
+        <p>
+          Project not showing up? Make sure it's available in Troi and marked as
+          a "favorite".
+        </p>
+      </section>
+    </div>
+  );
+
   return <div>TEST</div>;
 }