feat(frontend): handle page hide events

Integrate better with the page lifecycle state machine, see
https://developer.chrome.com/blog/page-lifecycle-api/

Also makes disconnected notifications less noisy, since they may occur
more frequently now (due to a frozen page being resumed).

2 files changed, 121 insertions, 31 deletions

diff --git a/subprojects/frontend/src/editor/ConnectionStatusNotification.tsx b/subprojects/frontend/src/editor/ConnectionStatusNotification.tsx
index e402e296..54c4e834 100644
--- a/subprojects/frontend/src/editor/ConnectionStatusNotification.tsx
+++ b/subprojects/frontend/src/editor/ConnectionStatusNotification.tsx
@@ -1,50 +1,83 @@
 import Button from '@mui/material/Button';
 import { observer } from 'mobx-react-lite';
-import { type SnackbarKey, useSnackbar } from 'notistack';
+import {
+  useSnackbar,
+  type SnackbarKey,
+  type SnackbarMessage,
+  type OptionsObject,
+} from 'notistack';
 import React, { useEffect } from 'react';
 
 import { ContrastThemeProvider } from '../theme/ThemeProvider';
 
 import type EditorStore from './EditorStore';
 
-const CONNECTING_DEBOUNCE_TIMEOUT = 250;
+const DEBOUNCE_TIMEOUT = 350;
+
+function enqueueLater(
+  enqueueSnackbar: (
+    message: SnackbarMessage,
+    options: OptionsObject | undefined,
+  ) => SnackbarKey,
+  closeSnackbar: (key: SnackbarKey) => void,
+  message: SnackbarMessage,
+  options?: OptionsObject | undefined,
+  debounceTimeout = DEBOUNCE_TIMEOUT,
+): () => void {
+  let key: SnackbarKey | undefined;
+  let timeout: number | undefined = setTimeout(() => {
+    timeout = undefined;
+    key = enqueueSnackbar(message, options);
+  }, debounceTimeout);
+  return () => {
+    if (timeout !== undefined) {
+      clearTimeout(timeout);
+    }
+    if (key !== undefined) {
+      closeSnackbar(key);
+    }
+  };
+}
 
 export default observer(function ConnectionStatusNotification({
   editorStore,
 }: {
   editorStore: EditorStore;
 }): null {
-  const { opened, opening, connectionErrors } = editorStore;
+  const {
+    opened,
+    opening,
+    connectionErrors,
+    disconnectedByUser,
+    networkMissing,
+  } = editorStore;
   const { enqueueSnackbar, closeSnackbar } = useSnackbar();
 
   useEffect(() => {
     if (opening) {
-      let key: SnackbarKey | undefined;
-      let timeout: number | undefined = setTimeout(() => {
-        timeout = undefined;
-        key = enqueueSnackbar('Connecting to Refinery', {
+      return enqueueLater(
+        enqueueSnackbar,
+        closeSnackbar,
+        'Connecting to Refinery',
+        {
           persist: true,
           action: (
             <Button onClick={() => editorStore.disconnect()} color="inherit">
               Cancel
             </Button>
           ),
-        });
-      }, CONNECTING_DEBOUNCE_TIMEOUT);
-      return () => {
-        if (timeout !== undefined) {
-          clearTimeout(timeout);
-        }
-        if (key !== undefined) {
-          closeSnackbar(key);
-        }
-      };
+        },
+        500,
+      );
     }
 
-    if (connectionErrors.length >= 1) {
-      const key = enqueueSnackbar(
+    if (connectionErrors.length >= 1 && !opening) {
+      return enqueueLater(
+        enqueueSnackbar,
+        closeSnackbar,
         <div>
-          Connection error: <b>{connectionErrors[0]}</b>
+          Connection error:{' '}
+          <b>{connectionErrors[connectionErrors.length - 1]}</b>
           {connectionErrors.length >= 2 && (
             <>
               {' '}
@@ -57,28 +90,72 @@ export default observer(function ConnectionStatusNotification({
           persist: !opened,
           variant: 'error',
           action: opened ? (
-            <ContrastThemeProvider>
-              <Button onClick={() => editorStore.disconnect()} color="inherit">
-                Disconnect
-              </Button>
-            </ContrastThemeProvider>
+            <Button onClick={() => editorStore.disconnect()} color="inherit">
+              Disconnect
+            </Button>
           ) : (
-            <ContrastThemeProvider>
+            <>
               <Button onClick={() => editorStore.connect()} color="inherit">
                 Reconnect
               </Button>
               <Button onClick={() => editorStore.disconnect()} color="inherit">
                 Cancel
               </Button>
+            </>
+          ),
+        },
+      );
+    }
+
+    if (networkMissing) {
+      if (disconnectedByUser) {
+        return enqueueLater(
+          enqueueSnackbar,
+          closeSnackbar,
+          <div>
+            <b>No network connection:</b> Some editing features might be
+            degraded
+          </div>,
+          {
+            action: (
+              <ContrastThemeProvider>
+                <Button onClick={() => editorStore.connect()} color="primary">
+                  Try reconnecting
+                </Button>
+              </ContrastThemeProvider>
+            ),
+          },
+          0,
+        );
+      }
+
+      return enqueueLater(
+        enqueueSnackbar,
+        closeSnackbar,
+        <div>
+          <b>No network connection:</b> Refinery will try to reconnect when the
+          connection is restored
+        </div>,
+        {
+          persist: true,
+          action: (
+            <ContrastThemeProvider>
+              <Button onClick={() => editorStore.connect()} color="primary">
+                Try now
+              </Button>
+              <Button onClick={() => editorStore.disconnect()} color="inherit">
+                Cancel
+              </Button>
             </ContrastThemeProvider>
           ),
         },
       );
-      return () => closeSnackbar(key);
     }
 
-    if (!opened) {
-      const key = enqueueSnackbar(
+    if (disconnectedByUser) {
+      return enqueueLater(
+        enqueueSnackbar,
+        closeSnackbar,
         <div>
           <b>Not connected to Refinery:</b> Some editing features might be
           degraded
@@ -86,12 +163,14 @@ export default observer(function ConnectionStatusNotification({
         {
           action: (
             <ContrastThemeProvider>
-              <Button onClick={() => editorStore.connect()}>Reconnect</Button>
+              <Button onClick={() => editorStore.connect()} color="primary">
+                Reconnect
+              </Button>
             </ContrastThemeProvider>
           ),
         },
+        0,
       );
-      return () => closeSnackbar(key);
     }
 
     return () => {};
@@ -100,6 +179,8 @@ export default observer(function ConnectionStatusNotification({
     opened,
     opening,
     connectionErrors,
+    disconnectedByUser,
+    networkMissing,
     closeSnackbar,
     enqueueSnackbar,
   ]);
diff --git a/subprojects/frontend/src/editor/EditorStore.ts b/subprojects/frontend/src/editor/EditorStore.ts
index 3ec33b2c..ecbe6ef8 100644
--- a/subprojects/frontend/src/editor/EditorStore.ts
+++ b/subprojects/frontend/src/editor/EditorStore.ts
@@ -67,6 +67,7 @@ export default class EditorStore {
       contentAssist: false,
       formatText: false,
     });
+    this.client.start();
   }
 
   get opened(): boolean {
@@ -77,6 +78,14 @@ export default class EditorStore {
     return this.client.webSocketClient.opening;
   }
 
+  get disconnectedByUser(): boolean {
+    return this.client.webSocketClient.disconnectedByUser;
+  }
+
+  get networkMissing(): boolean {
+    return this.client.webSocketClient.networkMissing;
+  }
+
   get connectionErrors(): string[] {
     return this.client.webSocketClient.errors;
   }