Basic style for PageLoader

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "search.exclude": {
+    "public/images": true
+  }
+}

src/App.scss

@@ -65,6 +65,15 @@ footer {
   text-align: center;
 }
 
+.page-loader {
+  display: flex;
+  height: 85vh;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+  animation: fadeIn 3s forwards;
+}
+
 #tooltip-root {
   position: absolute;
   z-index: $z-index-tooltips;

src/components/PageLoader.tsx

@@ -5,11 +5,11 @@ export const PageLoader: FC<Props> = ({ isLoading, pastDelay, error, retry, time
   const retryButton = <button onClick={retry}>retry</button>
 
   if (error) {
-    return <div>Something went awry... do you wish to {retryButton}?</div>
+    return <div className="page-loader">Something went awry... do you wish to {retryButton}?</div>
   } else if (timedOut) {
-    return <div>Taking some time... {retryButton}?</div>
+    return <div className="page-loader">Taking some time... {retryButton}?</div>
   } else if (pastDelay) {
-    return <div>Loading...</div>
+    return <div className="page-loader">Loading...</div>
   } else {
     return null
   }