fix: harden update apply review follow-up

Author: Just-Insane

src/app/features/settings/about/About.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { Box, Text, Scroll, Button, config, toRem, Spinner } from 'folds';
 import { ArrowsClockwise, Code, Heart, menuIcon } from '$components/icons/phosphor';
 import { PageContent } from '$components/page';
@@ -195,12 +195,22 @@ export function About({ requestBack, requestClose }: Readonly<AboutProps>) {
   const buildLabel = BUILD_HASH ? ` (${BUILD_HASH})` : '';
   const openBugReport = useOpenBugReportModal();
   const [updateStatusMessage, setUpdateStatusMessage] = useState<string | undefined>();
+  const [isApplyingUpdate, setIsApplyingUpdate] = useState(false);
+  const isApplyingUpdateRef = useRef(false);
+  const isMountedRef = useRef(true);
   const [updateCheckState, runUpdateCheck] = useAsyncCallback<
     Awaited<ReturnType<typeof checkForAppUpdates>>,
     Error,
     []
   >(checkForAppUpdates);
 
+  useEffect(
+    () => () => {
+      isMountedRef.current = false;
+    },
+    []
+  );
+
   const handleCheckForUpdates = useCallback(async () => {
     try {
       const result = await runUpdateCheck();
@@ -214,12 +224,23 @@ export function About({ requestBack, requestClose }: Readonly<AboutProps>) {
   }, [runUpdateCheck]);
 
   const handleApplyUpdate = useCallback(async () => {
+    if (isApplyingUpdateRef.current) return;
+    isApplyingUpdateRef.current = true;
+    setIsApplyingUpdate(true);
+
     try {
       await applyPendingAppUpdate();
     } catch (error) {
-      setUpdateStatusMessage(
-        error instanceof Error ? error.message : 'Failed to apply the update.'
-      );
+      if (isMountedRef.current) {
+        setUpdateStatusMessage(
+          error instanceof Error ? error.message : 'Failed to apply the update.'
+        );
+      }
+    } finally {
+      if (isMountedRef.current) {
+        isApplyingUpdateRef.current = false;
+        setIsApplyingUpdate(false);
+      }
     }
   }, []);
 
@@ -315,8 +336,10 @@ export function About({ requestBack, requestClose }: Readonly<AboutProps>) {
                           size="300"
                           radii="300"
                           outlined
+                          disabled={isApplyingUpdate}
+                          before={isApplyingUpdate ? <Spinner variant="Secondary" size="100" /> : undefined}
                         >
-                          <Text size="B300">Apply Update</Text>
+                          <Text size="B300">{isApplyingUpdate ? 'Applying…' : 'Apply Update'}</Text>
                         </Button>
                       ) : (
                         <Button

src/app/pages/client/ClientRoot.tsx

@@ -209,6 +209,9 @@ export function ClientRoot({ children }: ClientRootProps) {
   const setSessions = useSetAtom(sessionsAtom);
   const [defaultLandingScreen] = useSetting(settingsAtom, 'defaultLandingScreen');
   const [swUpdateError, setSwUpdateError] = useState<string | undefined>();
+  const [isApplyingSwUpdate, setIsApplyingSwUpdate] = useState(false);
+  const isApplyingSwUpdateRef = useRef(false);
+  const isMountedRef = useRef(true);
 
   const activeSession: Session | undefined =
     sessions.find((s) => s.userId === activeSessionId) ?? sessions[0];
@@ -219,6 +222,13 @@ export function ClientRoot({ children }: ClientRootProps) {
   const syncStartTimeRef = useRef(performance.now());
   const firstSyncReadyRef = useRef(false);
 
+  useEffect(
+    () => () => {
+      isMountedRef.current = false;
+    },
+    []
+  );
+
   const [loading, setLoading] = useState(true);
 
   const [loadState, loadMatrix, setLoadState] = useAsyncCallback<MatrixClient, Error, []>(
@@ -515,24 +525,39 @@ export function ClientRoot({ children }: ClientRootProps) {
               style={{
                 padding: `${config.space.S100} 0`,
                 width: '100%',
-                cursor: 'pointer',
+                cursor: isApplyingSwUpdate ? 'progress' : 'pointer',
                 border: 'none',
                 background: 'none',
               }}
+              disabled={isApplyingSwUpdate}
               alignItems="Center"
               justifyContent="Center"
               onClick={() => {
+                if (isApplyingSwUpdateRef.current) return;
+                isApplyingSwUpdateRef.current = true;
+                setIsApplyingSwUpdate(true);
+
                 void applyPendingAppUpdate()
-                  .then(() => setSwUpdateError(undefined))
+                  .then(() => {
+                    if (!isMountedRef.current) return;
+                    setSwUpdateError(undefined);
+                    isApplyingSwUpdateRef.current = false;
+                    setIsApplyingSwUpdate(false);
+                  })
                   .catch((error) => {
+                    if (!isMountedRef.current) return;
                     setSwUpdateError(
                       error instanceof Error ? error.message : 'Failed to apply the update.'
                     );
+                    isApplyingSwUpdateRef.current = false;
+                    setIsApplyingSwUpdate(false);
                   });
               }}
             >
               <Box direction="Column" alignItems="Center" gap="100">
-                <Text size="L400">Update available — tap to reload</Text>
+                <Text size="L400">
+                  {isApplyingSwUpdate ? 'Applying update…' : 'Update available — tap to reload'}
+                </Text>
                 {swUpdateError && <Text size="T200">{swUpdateError}</Text>}
               </Box>
             </Box>

src/app/utils/appUpdates.test.ts

@@ -386,6 +386,7 @@ describe('appUpdates', () => {
     expect((result as Error).message).toBe(
       'Failed to check for updates. Reload the app and try again.'
     );
+    expect(fetchMock).not.toHaveBeenCalled();
   });
 
   it('returns once any registration confirms an update', async () => {

src/app/utils/appUpdates.ts

@@ -402,6 +402,13 @@ export async function checkForAppUpdates(): Promise<AppUpdateCheckResult> {
     };
   }
 
+  if (registrations.length > 0 && (successfulUpdates.length === 0 || rejectedUpdates.length > 0)) {
+    const firstError = rejectedUpdates[0]?.reason;
+    throw firstError instanceof Error
+      ? new Error(UPDATE_CHECK_FAILURE_MESSAGE, { cause: firstError })
+      : new Error(UPDATE_CHECK_FAILURE_MESSAGE);
+  }
+
   const hostedAppShellUpdateStatus = await getHostedAppShellUpdateStatus();
   if (hostedAppShellUpdateStatus === 'update-available') {
     hostedAppShellUpdateDetected = true;
@@ -412,13 +419,6 @@ export async function checkForAppUpdates(): Promise<AppUpdateCheckResult> {
     };
   }
 
-  if (registrations.length > 0 && (successfulUpdates.length === 0 || rejectedUpdates.length > 0)) {
-    const firstError = rejectedUpdates[0]?.reason;
-    throw firstError instanceof Error
-      ? new Error(UPDATE_CHECK_FAILURE_MESSAGE, { cause: firstError })
-      : new Error(UPDATE_CHECK_FAILURE_MESSAGE);
-  }
-
   if (registrations.length === 0) {
     if (hostedAppShellUpdateStatus === 'up-to-date') {
       return {