Bug Description

When a user clicks the "Refresh Now" button in the AppUpdateBanner, the page appears to reload twice in quick succession, creating a confusing user experience. The user clicks refresh, sees the old version briefly (1-3 seconds), then the page suddenly reloads again automatically.

This occurs due to a race condition between two independent update detection mechanisms:

1. AppUpdateBanner: Polls version.json every 10 minutes (production) or 5 seconds (dev)
2. PWA Service Worker: Detects new service worker updates independently

When the user clicks "Refresh Now", it immediately calls window.location.reload(), but the service worker is still activating the new version in the background. Once activation completes, the PWA plugin automatically triggers a second reload.

Steps to Reproduce

1. Deploy a new version of the application to production
2. Wait for AppUpdateBanner to detect the update (amber banner appears at top)
3. Click the "Refresh Now" button
4. Observe the page reload immediately
5. Notice you're still on the old version briefly
6. Page suddenly reloads again automatically after 1-3 seconds
7. Now on the new version

Expected Behavior

When clicking "Refresh Now", the user should experience a single, smooth update:

1. Click "Refresh Now" button
2. Button shows loading spinner/progress indicator ("Updating...")
3. Service worker activates new version in background
4. Single page reload occurs once SW is ready
5. User immediately sees new version (no double-reload)

Actual Behavior

Current behavior:

1. User clicks "Refresh Now"
2. Page reloads immediately via window.location.reload()
3. Old version loads briefly (confusing!)
4. Service worker finishes activation (1-3 seconds later)
5. Page reloads again automatically
6. New version finally loads

This creates a jarring "did it work?" moment where the user sees the old version and may think the refresh didn't work, only to have the page reload again unexpectedly.

Browser

Chrome

Browser Version

All modern browsers (tested on Chrome 131, Firefox 133, Safari 18)

Operating System

All platforms

Device Type

Desktop

Connection Type

WiFi

Console Errors

No errors - this is a UX/coordination issue, not a runtime error.

URL / Page

Occurs on any page when AppUpdateBanner is visible (all routes)

Additional Context

Technical Details:

The issue stems from two files:

1. AppUpdateBanner.tsx (line 126):

const handleRefresh = () => {
  window.location.reload()  // Immediate reload, doesn't wait for SW
}

2. vite.config.ts (lines 14-15):

VitePWA({
  registerType: 'autoUpdate',  // Automatically reloads when SW activates

The autoUpdate mode means the PWA plugin automatically reloads all clients when a new service worker is ready, with no coordination with AppUpdateBanner.

Suggested Solution:

Coordinate the refresh button with the service worker update lifecycle:

1. Import useRegisterSW hook from virtual:pwa-register/react in AppUpdateBanner
2. When user clicks "Refresh Now":
   • Change button text to "Updating..." with spinner
   • Disable the button
   • Call updateServiceWorker(true) which:
     • Tells waiting SW to skip waiting
     • Activates new SW
     • Reloads page once after activation
3. No second reload occurs

This provides clear feedback and eliminates the confusing double-reload.

Alternative Approach:

If coordinating with the SW proves complex, an alternative would be to:

1. Show a progress modal/overlay when clicking "Refresh Now"
2. Display "Activating update..." message
3. Wait for SW activation (monitor via SW events)
4. Then reload once

Related Code Locations:

• src/components/AppUpdateBanner.tsx: Lines 125-127 (handleRefresh function)
• src/components/PWAUpdatePrompt.tsx: Lines 25-27 (example of proper SW coordination)
• src/services/versionCheck.ts: Version polling logic
• vite.config.ts: Lines 14-15 (PWA configuration)

Why This Matters:

• Creates confusion and uncertainty for users
• Makes the app feel buggy even though it's working correctly
• Users may repeatedly click refresh thinking it didn't work
• Poor perceived performance

Pre-submission Checklist

• I have searched existing issues to ensure this hasn't been reported already
• I have tested this on the latest version at https://lenr.academy
• I have provided sufficient information to reproduce the bug