Skip to content

Performance optimization: WASM worker, PWA support, SVG extraction, and context optimization - #402

Merged
Mikey-222 merged 1 commit into
Hel-Phone:mainfrom
Akanimoh12:perf/performance-optimization-issues
Aug 27, 2026
Merged

Performance optimization: WASM worker, PWA support, SVG extraction, and context optimization#402
Mikey-222 merged 1 commit into
Hel-Phone:mainfrom
Akanimoh12:perf/performance-optimization-issues

Conversation

@Akanimoh12

@Akanimoh12 Akanimoh12 commented Aug 27, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Summary

Addresses four critical performance and architecture issues to improve the emergency response application's reliability and user experience.

Changes

Issue #62: Offload Noir WASM instantiation from the main thread

  • Files: src/workers/zk-worker.js, src/lib/worker-manager.js
  • Moved CPU-intensive WASM instantiation to a Web Worker, eliminating main thread blocking
  • Implemented async message-passing pattern for non-blocking proof generation
  • UI remains responsive during critical emergency dispatch moments

Issue #57: Implement Service Worker and PWA caching strategy

  • Files: package.json, vite.config.js, src/service-worker.js, src/components/OfflineIndicator.jsx, src/main.jsx
  • Added vite-plugin-pwa for automatic Service Worker generation
  • Configured intelligent caching: cache-first for assets and WASM, stale-while-revalidate for network requests
  • Static assets, WASM files, and Mapbox core library are now cached for offline access
  • `OfflineIndicator` alerts users when network connection is lost
  • App gracefully handles offline mode without complete failure

Issue #58: Extract massive inline SVG map to external component

  • Files: `src/components/CommunityMap.jsx`, `src/App.jsx`
  • Extracted ~170 lines of inline SVG path data to dedicated functional component
  • Reduces App.jsx from 1400+ lines to cleaner, more maintainable code
  • Browser can now cache SVG independently, improving load performance
  • Maintains responsive viewBox scaling and all animation effects

Issue #61: Prevent redundant DOM updates from React Context state

  • Files: `src/context/WalletStateContext.jsx`, `src/context/WalletActionContext.jsx`, `src/context/WalletProvider.jsx`
  • Split monolithic wallet context into logical providers
  • Components now subscribe only to minimal state slices they require
  • Eliminates deep re-renders when wallet state changes (e.g., block height polling)
  • Improved performance for routes that don't need wallet state (e.g., landing page)

Test Plan

  • Verify WASM initialization no longer freezes UI when generating proofs
  • Test offline behavior: disable network and verify app shows offline indicator
  • Verify Service Worker is registered and caching works (DevTools → Application → Cache Storage)
  • Confirm Mapbox tiles load from cache on second visit
  • Check that App.jsx renders without inline SVG (CommunityMap component now used)
  • Verify Help.jsx still receives wallet state correctly after context refactor
  • Test on mobile to ensure responsive behavior is preserved

Closes #62, Closes #57, Closes #58, Closes #61.

@Akanimoh12
perf: offload WASM instantiation, add PWA support, extract SVG map, a…
47953b3 
…nd optimize context providers

Closes Hel-Phone#62, Hel-Phone#57, Hel-Phone#58, Hel-Phone#61

## Summary

### Issue Hel-Phone#62: Offload Noir WASM instantiation from the main thread
- Created Web Worker at `src/workers/zk-worker.js` to handle WASM instantiation asynchronously
- Implemented `src/lib/worker-manager.js` for non-blocking worker communication via message passing
- WASM instantiation no longer blocks UI thread during emergency dispatch

### Issue Hel-Phone#57: Implement Service Worker and PWA caching strategy
- Integrated `vite-plugin-pwa` with precaching manifest
- Created `src/service-worker.js` with cache-first and stale-while-revalidate strategies
- Cache static assets, WASM files, and Mapbox core library
- Implemented `OfflineIndicator` component to alert users of network loss
- Offline fallback UI prevents complete app failure during connection loss

### Issue Hel-Phone#58: Extract massive inline SVG map to external component
- Extracted ~170 lines of complex SVG path data from `App.jsx` to `src/components/CommunityMap.jsx`
- Reduces App.jsx bloat and enables browser caching of the asset independently
- Maintains responsive viewBox scaling via inline styles

### Issue Hel-Phone#61: Prevent redundant DOM updates from React Context state
- Split global context into `WalletStateContext` and `WalletActionContext`
- Created dedicated provider structure in `src/context/WalletProvider.jsx`
- Components now subscribe only to required state slices
- Reduces deep re-renders when wallet state changes (block height polling, etc.)

All changes follow existing code patterns and maintain compatibility with GitHub Actions CI/CD.
@drips-wave

drips-wave Bot commented Aug 27, 2026

Copy link
Copy Markdown

@Akanimoh12 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@Mikey-222
Mikey-222 merged commit 40dc8e2 into Hel-Phone:main Aug 27, 2026
Darkvader-ship-it added a commit to Darkvader-ship-it/HelPhone that referenced this pull request Aug 27, 2026
@Darkvader-ship-it
fix: resolve upstream rebase conflicts, add missing exports and PWA c…
e797ad3 
…onfig - Rebase onto upstream/main (PR Hel-Phone#401, Hel-Phone#402: PWA support, performance optimizations) - Add saveWalletAddress / loadWalletAddress / clearWalletAddress to contract.ts (upstream added these for wallet auto-reconnect persistence) - Add subscribeToContractEvents / getWalletBalances stubs to contract.ts - Fix walletConnecting ternary JSX — wrap sibling elements in Fragment - Set injectManifest.maximumFileSizeToCacheInBytes = 10MB in vite.config.ts so Barretenberg WASM bundles (~3-4MB each) pass PWA precache validation - Install vite-plugin-pwa (new upstream dep for PWA strategy) - Build: passes (npm run build ✓)
Darkvader-ship-it added a commit to Darkvader-ship-it/HelPhone that referenced this pull request Aug 27, 2026
@Darkvader-ship-it
fix: resolve upstream rebase conflicts, add missing exports and PWA c…
6528ca4 
…onfig - Rebase onto upstream/main (PR Hel-Phone#401, Hel-Phone#402: PWA support, performance optimizations) - Add saveWalletAddress / loadWalletAddress / clearWalletAddress to contract.ts (upstream added these for wallet auto-reconnect persistence) - Add subscribeToContractEvents / getWalletBalances stubs to contract.ts - Fix walletConnecting ternary JSX — wrap sibling elements in Fragment - Set injectManifest.maximumFileSizeToCacheInBytes = 10MB in vite.config.ts so Barretenberg WASM bundles (~3-4MB each) pass PWA precache validation - Install vite-plugin-pwa (new upstream dep for PWA strategy) - Build: passes (npm run build ✓)
Darkvader-ship-it added a commit to Darkvader-ship-it/HelPhone that referenced this pull request Aug 27, 2026
@Darkvader-ship-it
fix: resolve upstream rebase conflicts, add missing exports and PWA c…
899a0f7 
…onfig - Rebase onto upstream/main (PR Hel-Phone#401, Hel-Phone#402: PWA support, performance optimizations) - Add saveWalletAddress / loadWalletAddress / clearWalletAddress to contract.ts (upstream added these for wallet auto-reconnect persistence) - Add subscribeToContractEvents / getWalletBalances stubs to contract.ts - Fix walletConnecting ternary JSX — wrap sibling elements in Fragment - Set injectManifest.maximumFileSizeToCacheInBytes = 10MB in vite.config.ts so Barretenberg WASM bundles (~3-4MB each) pass PWA precache validation - Install vite-plugin-pwa (new upstream dep for PWA strategy) - Build: passes (npm run build ✓)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

2 participants

@Akanimoh12 @Mikey-222