Tidy up loading and error states

Author: davidje13

frontend/src/components/App.tsx

@@ -2,6 +2,8 @@ import { lazy, Suspense, type FunctionComponent } from 'react';
 import { Route, Switch } from 'wouter';
 import { RedirectRoute } from './RedirectRoute';
 import { Footer } from './Footer';
+import { Header } from './common/Header';
+import { LoadingIndicator } from './common/Loader';
 import { LoginCallback } from './login/LoginCallback';
 import { RetroRouter } from './RetroRouter';
 import { WatchRetro } from './WatchRetro';
@@ -61,4 +63,9 @@ export const App: FunctionComponent = () => (
   </>
 );
 
-const LOADER = <div className="loader">Loading&hellip;</div>;
+const LOADER = (
+  <article className="page-loading">
+    <Header documentTitle="Refacto" title="Refacto" />
+    <LoadingIndicator />
+  </article>
+);

frontend/src/components/RetroRouter.tsx

@@ -14,6 +14,8 @@ import { useRetroAuth } from '../hooks/data/useRetroAuth';
 import { useRetroReducer } from '../hooks/data/useRetroReducer';
 import { StateMapProvider } from '../hooks/useStateMap';
 import { RetroNotFoundPage } from './retro-not-found/RetroNotFoundPage';
+import { Header } from './common/Header';
+import { LoadingError, LoadingIndicator } from './common/Loader';
 import { PasswordPage } from './password/PasswordPage';
 import { ConnectionOverlay } from './retro/ConnectionOverlay';
 import { RetroPage } from './retro/RetroPage';
@@ -41,19 +43,46 @@ export const RetroRouter: FunctionComponent<PropsT> = ({ slug }) => {
   }
 
   if (slugError) {
-    return <div className="loader error">{slugError.message}</div>;
+    return (
+      <article className="page-retro-error">
+        <Header
+          documentTitle={`${slug} - Refacto`}
+          title={slug}
+          backLink={{ label: 'Home', action: '/' }}
+        />
+        <LoadingError error={slugError.message} />
+      </article>
+    );
   }
 
   if (!retroId) {
-    return <div className="loader">Loading&hellip;</div>;
+    return (
+      <article className="page-retro-loading">
+        <Header
+          documentTitle={`${slug} - Refacto`}
+          title={slug}
+          backLink={{ label: 'Home', action: '/' }}
+        />
+        <LoadingIndicator />
+      </article>
+    );
   }
 
   if (!retroAuth || (!retroState && status === 'reauthenticate')) {
     return <PasswordPage slug={slug} retroId={retroId} />;
   }
 
   if (!retroState) {
-    return <div className="loader">Loading&hellip;</div>;
+    return (
+      <article className="page-retro-loading">
+        <Header
+          documentTitle={`${slug} - Refacto`}
+          title={slug}
+          backLink={{ label: 'Home', action: '/' }}
+        />
+        <LoadingIndicator />
+      </article>
+    );
   }
 
   const retroParams = {

frontend/src/components/WatchRetro.tsx

@@ -4,6 +4,8 @@ import { retroAuthService } from '../api/api';
 import { LiveEventsProvider } from '../hooks/useLiveEvents';
 import { useRetroReducer } from '../hooks/data/useRetroReducer';
 import { useLocationHash } from '../hooks/env/useLocationHash';
+import { Header } from './common/Header';
+import { LoadingIndicator } from './common/Loader';
 import { ConnectionOverlay } from './retro/ConnectionOverlay';
 import { RetroPage } from './retro/RetroPage';
 
@@ -30,14 +32,28 @@ export const WatchRetro: FunctionComponent<PropsT> = ({ retroId }) => {
 
   if (retroAuth.state === 'rejected') {
     return (
-      <div className="loader error">
-        Incorrect URL, or access to this retro has been revoked
-      </div>
+      <article className="page-watch-auth-error short-page">
+        <Header
+          documentTitle="Incorrect URL - Refacto"
+          title="Incorrect URL"
+          backLink={{ label: 'Home', action: '/' }}
+        />
+        <p>Incorrect URL, or access to this retro has been revoked</p>
+      </article>
     );
   }
 
   if (!retroAuth.latestData || !retroState) {
-    return <div className="loader">Loading&hellip;</div>;
+    return (
+      <article className="page-retro-loading">
+        <Header
+          documentTitle="Refacto"
+          title="Refacto"
+          backLink={{ label: 'Home', action: '/' }}
+        />
+        <LoadingIndicator />
+      </article>
+    );
   }
 
   return (

frontend/src/components/archive-list/ArchiveListPage.css

@@ -1,10 +1,4 @@
 .page-archive-list {
-  text-align: center;
-
-  & p {
-    margin: 64px 32px;
-  }
-
   & ul.archives {
     margin: 64px 16px 128px;
     list-style: none;

frontend/src/components/archive-list/ArchiveListPage.tsx

@@ -16,7 +16,7 @@ export const ArchiveListPage = memo(({ retroAuth, retro }: PropsT) => {
   );
 
   return (
-    <article className="page-archive-list">
+    <article className="page-archive-list short-page">
       <Header
         documentTitle={`Archives - ${retro.name} - Refacto`}
         title={`${retro.name} Archives`}

frontend/src/components/global-styles/article.css

@@ -53,3 +53,11 @@
     }
   }
 }
+
+.short-page {
+  text-align: center;
+
+  & p {
+    margin: 64px 32px;
+  }
+}

frontend/src/components/login/LoginCallback.css

@@ -4,7 +4,6 @@ import { handleLogin } from './handleLogin';
 import { useEvent } from '../../hooks/useEvent';
 import { sessionStore } from '../../helpers/storage';
 import { Header } from '../common/Header';
-import './LoginCallback.css';
 
 interface PropsT {
   service: string;
@@ -55,7 +54,7 @@ export const LoginCallback = memo(({ service }: PropsT) => {
   }, [stableSetLocation]);
 
   return (
-    <article className="page-login-callback">
+    <article className="page-login-callback short-page">
       <Header
         documentTitle="Refacto"
         title="Refacto"

frontend/src/components/login/LoginCallback.tsx

@@ -1,9 +1,8 @@
 import { memo } from 'react';
 import { Header } from '../common/Header';
-import './NotFoundPage.css';
 
 export const NotFoundPage = memo(() => (
-  <article className="page-not-found">
+  <article className="page-not-found short-page">
     <Header
       documentTitle="Not Found - Refacto"
       title="Not Found"