From e0a13778f6b5c98d15b4e6d7db467c86273dda26 Mon Sep 17 00:00:00 2001
From: Blaine Booher <bgbooher@gmail.com>
Date: Mon, 2 Dec 2024 14:55:32 -0600
Subject: [PATCH] spinner is in bottom corner, tests all pass

---
 server/todos.db             | Bin 20480 -> 20480 bytes
 src/App.css                 |  11 +++++++++++
 src/components/TaskList.jsx |  10 +++++++---
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/server/todos.db b/server/todos.db
index 8fb7ad4534aef5bb4ac8111315c3128c9a03460c..dd750f209b14acc719988302b3384d3602c467ea 100644
GIT binary patch
delta 300
zcmZozz}T>Wae_3X@kAMCM&peMQ|%?$IT)G6IZKOEi;8&}7#NuOHZ$-m@lWL2yjf5{
zoR71Sn~jq}RMOLP@=SkAKT}gH14BJSb4vwn0|P4q10w??6J0|iT>~QpBLgc_BP$aN
zJyR1??6MHO78X$1T=vP6{p}4*O{`4K^(+l>7zvcM)Uz-!foWoeXfm`iHqkROg$bj%
Z!^FzaP|w^LZW9|wlO8e7v$TM@0{~L^KcN5s

delta 126
zcmZozz}T>Wae_1>$3z)tMvjdMQ|(2WI2f75IZKOEi;8&}7#JA&Co=F)+$<=N#IM^Z
z$jHf{DCz0R>FJr4SyWu2P?A`jotv7HS(<BPU{nm2&1K?b5S8>~n5^e#$zf<|Wn`ph
VZa6v6PfP&DF;LJpFt9Q(004^}9UK4v

diff --git a/src/App.css b/src/App.css
index e69de29..13d68e8 100644
--- a/src/App.css
+++ b/src/App.css
@@ -0,0 +1,11 @@
+.loading-spinner {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 1000;
+}
+
+.loading-spinner .spinner-border {
+  width: 2rem;
+  height: 2rem;
+}
diff --git a/src/components/TaskList.jsx b/src/components/TaskList.jsx
index 8cb3b22..8cf06a6 100644
--- a/src/components/TaskList.jsx
+++ b/src/components/TaskList.jsx
@@ -3,6 +3,7 @@ import useTodoStore from "../stores/todoStore";
 import useAuthStore from "../stores/authStore";
 import { Table, Button, Spinner, Alert, Badge } from "react-bootstrap";
 import { BsCheckSquare, BsSquare } from "react-icons/bs";
+import '../App.css';
 
 function TaskList() {
   const {
@@ -26,9 +27,7 @@ function TaskList() {
   // Don't render if not authenticated
   if (!user) return null;
 
-  if (isLoading) {
-    return <Spinner animation="border" role="status" />;
-  }
+  // Loading state handled in main return
 
   if (error) {
     return <Alert variant="danger">Error: {error}</Alert>;
@@ -49,6 +48,11 @@ function TaskList() {
 
   return (
     <>
+      {isLoading && (
+        <div className="loading-spinner">
+          <Spinner animation="border" role="status" />
+        </div>
+      )}
       <Table bordered hover>
         <thead>
           <tr>