Add RootBoundary error component (#4667)

* Add RootBoundary error component

* esf

app/javascript/RootBoundary.jsx

+import React from 'react';
+import { isRouteErrorResponse, useRouteError } from 'react-router-dom';
+import DefaultErrorPage from './components/errors/DefaultErrorPage';
+import NotFoundPage from './components/errors/NotFoundPage';
+
+export default function RootBoundary() {
+  const error = useRouteError();
+
+  if (isRouteErrorResponse(error)) {
+    // Route Errors
+    switch (error.status) {
+      case 404:
+        return <NotFoundPage />;
+      default:
+        return <DefaultErrorPage />;
+    }
+  } else {
+    // Non-Route Errors (hooks, promises, etc.)
+    switch (error.response.status) {
+      case 404:
+        return <NotFoundPage />;
+      default:
+        return <DefaultErrorPage />;
+    }
+  }
+}

app/javascript/components/errors/DefaultErrorPage.jsx

@@ -5,12 +5,17 @@ import {
 import { useTranslation } from 'react-i18next';
 import Logo from '../shared_components/Logo';
 import ButtonLink from '../shared_components/utilities/ButtonLink';
+import useSiteSetting from '../../hooks/queries/site_settings/useSiteSetting';
 
 export default function DefaultErrorPage() {
   const { t } = useTranslation();
 
+  // Needed for Route Errors
+  const { data: brandColor } = useSiteSetting('PrimaryColor');
+  document.documentElement.style.setProperty('--brand-color', brandColor);
+
   return (
-    <div className="vertical-buffer">
+    <div className="pt-lg-5">
       <div className="text-center pb-4">
         <Logo />
       </div>

app/javascript/components/errors/NotFoundPage.jsx

@@ -5,12 +5,17 @@ import {
 import { useTranslation } from 'react-i18next';
 import Logo from '../shared_components/Logo';
 import ButtonLink from '../shared_components/utilities/ButtonLink';
+import useSiteSetting from '../../hooks/queries/site_settings/useSiteSetting';
 
 export default function NotFoundPage() {
   const { t } = useTranslation();
 
+  // Needed for Route Errors
+  const { data: brandColor } = useSiteSetting('PrimaryColor');
+  document.documentElement.style.setProperty('--brand-color', brandColor);
+
   return (
-    <div className="vertical-buffer">
+    <div className="pt-lg-5">
       <div className="text-center pb-4">
         <Logo />
       </div>

app/javascript/components/rooms/room/join/RoomJoin.jsx

@@ -23,6 +23,7 @@ import Avatar from '../../../users/user/Avatar';
 import Form from '../../../shared_components/forms/Form';
 import FormControl from '../../../shared_components/forms/FormControl';
 import FormControlGeneric from '../../../shared_components/forms/FormControlGeneric';
+import RoomJoinPlaceholder from './RoomJoinPlaceholder';
 
 export default function RoomJoin() {
   const { t } = useTranslation();
@@ -111,7 +112,7 @@ export default function RoomJoin() {
     }
   }, [roomStatusAPI.isError]);
 
-  if (publicRoom.isLoading) return null;
+  if (publicRoom.isLoading) return <RoomJoinPlaceholder />;
 
   if (!currentUser.signed_in && publicRoom.data.require_authentication === 'true') {
     return <RequireAuthentication path={path} />;

app/javascript/components/rooms/room/join/RoomJoinPlaceholder.jsx

+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import Card from 'react-bootstrap/Card';
+import {
+  Button, Col, Row, Stack,
+} from 'react-bootstrap';
+import Logo from '../../../shared_components/Logo';
+import Placeholder from '../../../shared_components/utilities/Placeholder';
+import RoundPlaceholder from '../../../shared_components/utilities/RoundPlaceholder';
+
+export default function RoomJoinPlaceholder() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="vertical-buffer">
+      <div className="text-center pb-4">
+        <Logo />
+      </div>
+      <Card className="col-md-6 mx-auto p-0 border-0 shadow-sm">
+        <Card.Body className="pt-4 px-5">
+          <Row>
+            <Col className="col-xxl-8">
+              <Placeholder width={6} size="md" className="mt-1" />
+              <Placeholder width={12} size="lg" />
+            </Col>
+            <Col>
+              <Stack direction="vertical" gap={3}>
+                <RoundPlaceholder size="medium" className="d-block mx-auto" />
+                <Placeholder width={10} size="md" className="d-block mx-auto" />
+              </Stack>
+            </Col>
+          </Row>
+        </Card.Body>
+        <Card.Footer className="px-5 pb-3 bg-white border-2">
+          <div className="mt-4">
+            <Placeholder width={12} size="lg" />
+            <Button
+              variant="brand"
+              className="mt-3 d-block float-end"
+              disabled
+            >
+              {t('room.meeting.join_meeting')}
+            </Button>
+          </div>
+        </Card.Footer>
+      </Card>
+    </div>
+  );
+}

app/javascript/main.jsx

@@ -32,9 +32,8 @@ import VerifyAccount from './components/users/account_activation/VerifyAccount';
 import AdminPanel from './components/admin/AdminPanel';
 import UnauthenticatedOnly from './routes/UnauthenticatedOnly';
 import AuthenticatedOnly from './routes/AuthenticatedOnly';
-import DefaultErrorPage from './components/errors/DefaultErrorPage';
-import NotFoundPage from './components/errors/NotFoundPage';
 import PendingRegistration from './components/users/registration/PendingRegistration';
+import RootBoundary from './RootBoundary';
 
 const queryClientConfig = {
   defaultOptions: {
@@ -51,7 +50,7 @@ const router = createBrowserRouter(
     <Route
       path="/"
       element={<App />}
-      errorElement={<DefaultErrorPage />}
+      errorElement={<RootBoundary />}
     >
       <Route index element={<HomePage />} />
 
@@ -84,7 +83,6 @@ const router = createBrowserRouter(
       <Route path="/profile" element={<Profile />} />
       <Route path="/rooms/:friendlyId/join" element={<RoomJoin />} />
 
-      <Route path="*" element={<NotFoundPage />} />
     </Route>,
   ),
 );