spinner is in bottom corner, tests all pass

EmergingDigitalAcademy · Dec 2, 2024 · e0a1377 · e0a1377
1 parent 70dbab7
commit e0a1377
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 3 deletions.
diff --git a/server/todos.db b/server/todos.db
diff --git 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
@@ -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>