Show message while reconnecting

frontend/src/api/RetroTracker.ts

@@ -33,7 +33,6 @@ export class RetroTracker {
           url: `${wsBase}/retros/${retroId}`,
           token: retroToken,
         }));
-        // TODO: show reconnection UI
         s.addEventListener('connected', () => console.info('connected'));
         s.addEventListener('disconnected', (e) =>
           console.info('disconnected', e.detail.code, e.detail.reason),
@@ -51,14 +50,21 @@ export class RetroTracker {
     retroId: string,
     retroToken: string,
     retroStateCallback: (state: Retro) => void,
+    connectivityCallback: (connected: boolean) => void,
   ): RetroSubscription {
     const sub = this.subscriptionTracker.subscribe({ retroId, retroToken });
     sub.service.addStateListener(retroStateCallback);
+    const onConnect = () => connectivityCallback(true);
+    const onDisconnect = () => connectivityCallback(false);
+    sub.service.addEventListener('connected', onConnect);
+    sub.service.addEventListener('disconnected', onDisconnect);
 
     return {
       dispatch: sub.service.dispatch,
       unsubscribe: () => {
         sub.service.removeStateListener(retroStateCallback);
+        sub.service.removeEventListener('connected', onConnect);
+        sub.service.removeEventListener('disconnected', onDisconnect);
         sub.unsubscribe().catch((e) => {
           console.warn(`Failed to unsubscribe from retro ${retroId}`, e);
         });

frontend/src/components/App.tsx

@@ -34,7 +34,7 @@ export const App: FC = () => (
         <RetroListPage />
       </Route>
       <Route path="/retros/:slug/:rest*">
-        {({ slug }): ReactNode => <RetroRouter slug={slug ?? ''} />}
+        {({ slug }) => <RetroRouter slug={slug ?? ''} />}
       </Route>
 
       <RedirectRoute path="/retro/:slug" to="/retros/:slug" replace />

frontend/src/components/RetroRouter.less

@@ -0,0 +1,62 @@
+@import (reference) './colours.less';
+
+.connectionMessage {
+  position: fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 8px 16px;
+  border-radius: 4px;
+  color: @notification-text;
+  background: rgba(@notification-back, 0.7);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  z-index: 3;
+
+  @media (prefers-reduced-transparency: reduce) {
+    background: @notification-back;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+}
+
+.connectionMessage svg {
+  fill: currentColor;
+  width: 0.9em;
+  height: 0.9em;
+}
+
+.connectionMessage.connected {
+  top: -80px;
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    top 1.5s step-end,
+    visibility 1.5s step-end,
+    opacity 0.5s ease 1s;
+  animation: pulse 0.2s;
+  user-select: none;
+  pointer-events: none;
+}
+
+@keyframes pulse {
+  from {
+    transform: translateX(-50%);
+    animation-timing-function: ease-out;
+  }
+
+  50% {
+    transform: translateX(-50%) scale(1.1);
+    animation-timing-function: ease-in;
+  }
+
+  to {
+    transform: translateX(-50%);
+  }
+}
+
+.connectionMessage.disconnected {
+  top: 8px;
+  opacity: 1;
+  visibility: visible;
+  transition: top 0.2s cubic-bezier(0.1, 0.5, 0.6, 1.3) 1.5s;
+}

frontend/src/components/RetroRouter.tsx

@@ -1,15 +1,8 @@
-import {
-  type FC,
-  useState,
-  useLayoutEffect,
-  useEffect,
-  type ReactNode,
-} from 'react';
+import { type FC, useState, useLayoutEffect, useEffect } from 'react';
 import { Route, Switch, useLocation } from 'wouter';
 import { type Retro } from '../shared/api-entities';
 import { type RetroDispatch } from '../api/RetroTracker';
 import { retroTracker, slugTracker } from '../api/api';
-import { useNonce } from '../hooks/useNonce';
 import { RetroCreatePage } from './retro-create/RetroCreatePage';
 import { PasswordPage } from './password/PasswordPage';
 import { RetroPage } from './retro/RetroPage';
@@ -21,8 +14,10 @@ import { useRetroToken } from '../hooks/data/useRetroToken';
 import { StateMapProvider } from '../hooks/useStateMap';
 import { RedirectRoute } from './RedirectRoute';
 import { useEvent } from '../hooks/useEvent';
+import TickBold from '../../resources/tick-bold.svg';
+import './RetroRouter.less';
 
-type RetroReducerState = [Retro | null, RetroDispatch | null];
+type RetroReducerState = [Retro | null, RetroDispatch | null, boolean];
 
 const RETRO_SLUG_PATH = /^\/retros\/([^/]+)($|\/.*)/;
 
@@ -32,16 +27,14 @@ function useRetroReducer(
 ): RetroReducerState {
   const [location, setLocation] = useLocation();
   const [retroState, setRetroState] = useState<Retro | null>(null);
+  const [connected, setConnected] = useState<boolean>(false);
   const [retroDispatch, setRetroDispatch] = useState<RetroDispatch | null>(
     null,
   );
-  const nonce = useNonce();
 
   // This cannot be useEffect; the websocket would be closed & reopened
   // when switching between pages within the retro
   useLayoutEffect(() => {
-    const myNonce = nonce.next();
-
     setRetroState(null);
     setRetroDispatch(null);
     if (!retroId || !retroToken) {
@@ -51,7 +44,8 @@ function useRetroReducer(
     const subscription = retroTracker.subscribe(
       retroId,
       retroToken,
-      (data) => nonce.check(myNonce) && setRetroState(data),
+      (data) => setRetroState(data),
+      setConnected,
     );
     setRetroDispatch(() => subscription.dispatch);
     return () => subscription.unsubscribe();
@@ -77,7 +71,7 @@ function useRetroReducer(
     }
   }, [slug, updateSlug]);
 
-  return [retroState, retroDispatch];
+  return [retroState, retroDispatch, connected];
 }
 
 interface PropsT {
@@ -93,7 +87,10 @@ export interface RetroPagePropsT {
 export const RetroRouter: FC<PropsT> = ({ slug }) => {
   const [retroId, slugError] = useSlug(slug);
   const [retroToken, retroTokenError] = useRetroToken(retroId);
-  const [retro, retroDispatch] = useRetroReducer(retroId, retroToken);
+  const [retro, retroDispatch, connected] = useRetroReducer(
+    retroId,
+    retroToken,
+  );
 
   if (slugError === 'not found') {
     return <RetroCreatePage defaultSlug={slug} />;
@@ -119,27 +116,25 @@ export const RetroRouter: FC<PropsT> = ({ slug }) => {
     retroDispatch,
   };
 
-  return (
+  const routes = (
     <StateMapProvider scope={slug}>
       <Switch>
         <Route path="/retros/:slug">
           <RetroPage {...retroParams} />
         </Route>
         <Route path="/retros/:slug/groups/:group">
-          {({ group }): ReactNode => (
-            <RetroPage {...retroParams} group={group} />
-          )}
+          {({ group }) => <RetroPage {...retroParams} group={group} />}
         </Route>
         <Route path="/retros/:slug/archives">
           <ArchiveListPage {...retroParams} />
         </Route>
         <Route path="/retros/:slug/archives/:archiveId">
-          {({ archiveId }): ReactNode => (
+          {({ archiveId }) => (
             <ArchivePage {...retroParams} archiveId={archiveId ?? ''} />
           )}
         </Route>
         <Route path="/retros/:slug/archives/:archiveId/groups/:group">
-          {({ archiveId, group }): ReactNode => (
+          {({ archiveId, group }) => (
             <ArchivePage
               {...retroParams}
               archiveId={archiveId ?? ''}
@@ -155,4 +150,19 @@ export const RetroRouter: FC<PropsT> = ({ slug }) => {
       </Switch>
     </StateMapProvider>
   );
+
+  return (
+    <>
+      {routes}
+      {connected ? (
+        <div className="connectionMessage connected" aria-hidden>
+          <TickBold /> Connected
+        </div>
+      ) : (
+        <div className="connectionMessage disconnected" role="status">
+          Reconnecting&hellip;
+        </div>
+      )}
+    </>
+  );
 };

frontend/src/components/colours.less

@@ -27,3 +27,6 @@
 
 @link-text: #2b9e8e;
 @link-text-hover: darken(@link-text, 5%);
+
+@notification-back: #000000;
+@notification-text: #eeeeee;