2 files changed, 18 insertions, 2 deletions
diff --git a/Timeline/ClientApp/src/index.sass b/Timeline/ClientApp/src/index.sass
index a9329a34..4ba38aa1 100644
--- a/Timeline/ClientApp/src/index.sass
+++ b/Timeline/ClientApp/src/index.sass
@@ -73,3 +73,11 @@ textarea
   @extend .border-primary
   @extend .rounded
   @extend .bg-light
+
+.full-viewport-center-child
+  position: fixed
+  width: 100vw
+  height: 100vh
+  display: flex
+  justify-content: center
+  align-items: center
diff --git a/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx b/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx
index a246c0ce..bf87b706 100644
--- a/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx
+++ b/Timeline/ClientApp/src/timeline/TimelinePageTemplateUI.tsx
@@ -151,7 +151,11 @@ export default function TimelinePageTemplateUI<
           }
         }
       } else {
-        timelineBody = <Spinner />;
+        timelineBody = (
+          <div className="full-viewport-center-child">
+            <Spinner color="primary" type="grow" />
+          </div>
+        );
       }
       const { CardComponent } = props;
 
@@ -185,7 +189,11 @@ export default function TimelinePageTemplateUI<
         </>
       );
     } else {
-      body = <Spinner />;
+      body = (
+        <div className="full-viewport-center-child">
+          <Spinner color="primary" type="grow" />
+        </div>
+      );
     }
   }