From a3891810ed3d2080d225f031218f3667cb252f90 Mon Sep 17 00:00:00 2001
From: Isaac Light <wlight@emory.edu>
Date: Mon, 10 Jun 2024 15:19:27 -0400
Subject: [PATCH] centered spinners

---
 frontend/src/pages/PartDetails.tsx  |  9 ++++++++-
 frontend/src/pages/Parts.tsx        | 10 ++++++++--
 frontend/src/pages/RobotDetails.tsx |  9 ++++++++-
 frontend/src/pages/Robots.tsx       | 13 +++++++++++--
 frontend/src/pages/YourParts.tsx    | 10 ++++++++--
 frontend/src/pages/YourRobots.tsx   | 10 ++++++++--
 6 files changed, 51 insertions(+), 10 deletions(-)

diff --git a/frontend/src/pages/PartDetails.tsx b/frontend/src/pages/PartDetails.tsx
index 2344a327..2e34796c 100644
--- a/frontend/src/pages/PartDetails.tsx
+++ b/frontend/src/pages/PartDetails.tsx
@@ -11,6 +11,7 @@ import {
   Modal,
   Row,
   Spinner,
+  Container, 
 } from "react-bootstrap";
 import Markdown from "react-markdown";
 import { useNavigate, useParams } from "react-router-dom";
@@ -63,7 +64,13 @@ const PartDetails = () => {
   }, [error]);
 
   if (!part) {
-    return <Spinner animation="border" />;
+    return <Container fluid className="d-flex justify-content-center align-items-center" style={{ height: '100vh' }}>
+      <Row className="w-100">
+        <Col className="d-flex justify-content-center align-items-center">
+          <Spinner animation="border" />
+        </Col>
+      </Row>
+    </Container>;
   }
 
   const response: PartDetailsResponse = {
diff --git a/frontend/src/pages/Parts.tsx b/frontend/src/pages/Parts.tsx
index 0cd3b40f..80079948 100644
--- a/frontend/src/pages/Parts.tsx
+++ b/frontend/src/pages/Parts.tsx
@@ -2,7 +2,7 @@ import { useAlertQueue } from "hooks/alerts";
 import { api, Part } from "hooks/api";
 import { useAuthentication } from "hooks/auth";
 import { useEffect, useState } from "react";
-import { Breadcrumb, Card, Col, Row, Spinner } from "react-bootstrap";
+import { Breadcrumb, Card, Col, Row, Spinner, Container } from "react-bootstrap";
 import { useNavigate } from "react-router-dom";
 import { isFulfilled } from "utils/isfullfiled";
 
@@ -59,7 +59,13 @@ const Parts = () => {
   }, [error]);
 
   if (!partsData) {
-    return <Spinner animation="border" />;
+    return <Container fluid className="d-flex justify-content-center align-items-center" style={{ height: '100vh' }}>
+      <Row className="w-100">
+        <Col className="d-flex justify-content-center align-items-center">
+          <Spinner animation="border" />
+        </Col>
+      </Row>
+    </Container>;
   }
 
   return (
diff --git a/frontend/src/pages/RobotDetails.tsx b/frontend/src/pages/RobotDetails.tsx
index ee426998..f17393f1 100644
--- a/frontend/src/pages/RobotDetails.tsx
+++ b/frontend/src/pages/RobotDetails.tsx
@@ -11,6 +11,7 @@ import {
   Modal,
   Row,
   Spinner,
+  Container,
 } from "react-bootstrap";
 import Markdown from "react-markdown";
 import { Link, useNavigate, useParams } from "react-router-dom";
@@ -97,7 +98,13 @@ const RobotDetails = () => {
   }, [error]);
 
   if (!robot) {
-    return <Spinner animation="border" />;
+    return <Container fluid className="d-flex justify-content-center align-items-center" style={{ height: '100vh' }}>
+      <Row className="w-100">
+        <Col className="d-flex justify-content-center align-items-center">
+          <Spinner animation="border" />
+        </Col>
+      </Row>
+    </Container>;
   }
   const response: RobotDetailsResponse = {
     name: robot?.name,
diff --git a/frontend/src/pages/Robots.tsx b/frontend/src/pages/Robots.tsx
index c02c4811..743b2ff3 100644
--- a/frontend/src/pages/Robots.tsx
+++ b/frontend/src/pages/Robots.tsx
@@ -1,7 +1,7 @@
 import { api, Robot } from "hooks/api";
 import { useAuthentication } from "hooks/auth";
 import { useEffect, useState } from "react";
-import { Breadcrumb, Card, Col, Row, Spinner } from "react-bootstrap";
+import { Breadcrumb, Card, Col, Row, Spinner, Container } from "react-bootstrap";
 import { useNavigate } from "react-router-dom";
 import { isFulfilled } from "utils/isfullfiled";
 
@@ -52,7 +52,16 @@ const Robots = () => {
   }, [error, navigate]);
 
   if (!robotsData) {
-    return <Spinner animation="border" />;
+    return(
+      <Container fluid className="d-flex justify-content-center align-items-center" style={{ height: '100vh' }}>
+      <Row className="w-100">
+        <Col className="d-flex justify-content-center align-items-center">
+          <Spinner animation="border" />
+        </Col>
+      </Row>
+    </Container>
+    
+    );
   }
 
   return (
diff --git a/frontend/src/pages/YourParts.tsx b/frontend/src/pages/YourParts.tsx
index 6f9531aa..a2f825d1 100644
--- a/frontend/src/pages/YourParts.tsx
+++ b/frontend/src/pages/YourParts.tsx
@@ -1,7 +1,7 @@
 import { api, Part } from "hooks/api";
 import { useAuthentication } from "hooks/auth";
 import { useEffect, useState } from "react";
-import { Breadcrumb, Card, Col, Row, Spinner } from "react-bootstrap";
+import { Breadcrumb, Card, Col, Row, Spinner, Container } from "react-bootstrap";
 import { useNavigate } from "react-router-dom";
 
 const YourParts = () => {
@@ -34,7 +34,13 @@ const YourParts = () => {
   }, [error, navigate]);
 
   if (!partsData) {
-    return <Spinner animation="border" />;
+    return <Container fluid className="d-flex justify-content-center align-items-center" style={{ height: '100vh' }}>
+      <Row className="w-100">
+        <Col className="d-flex justify-content-center align-items-center">
+          <Spinner animation="border" />
+        </Col>
+      </Row>
+    </Container>;
   }
 
   return (
diff --git a/frontend/src/pages/YourRobots.tsx b/frontend/src/pages/YourRobots.tsx
index f114214f..79fea344 100644
--- a/frontend/src/pages/YourRobots.tsx
+++ b/frontend/src/pages/YourRobots.tsx
@@ -1,7 +1,7 @@
 import { api, Robot } from "hooks/api";
 import { useAuthentication } from "hooks/auth";
 import { useEffect, useState } from "react";
-import { Breadcrumb, Card, Col, Row, Spinner } from "react-bootstrap";
+import { Breadcrumb, Card, Col, Row, Spinner, Container } from "react-bootstrap";
 import { useNavigate } from "react-router-dom";
 
 const YourRobots = () => {
@@ -35,7 +35,13 @@ const YourRobots = () => {
   }, [error, navigate]);
 
   if (!robotsData) {
-    return <Spinner animation="border" />;
+    return <Container fluid className="d-flex justify-content-center align-items-center" style={{ height: '100vh' }}>
+      <Row className="w-100">
+        <Col className="d-flex justify-content-center align-items-center">
+          <Spinner animation="border" />
+        </Col>
+      </Row>
+    </Container>;
   }
 
   return (