Title: feat: Add loading spinners and skeleton screens for long-running operations - #401
Merged
Merged
Conversation
|
@alfeedrips 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! 🚀 |
Darkvader-ship-it
added a commit
to Darkvader-ship-it/HelPhone
that referenced
this pull request
Aug 27, 2026
…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
…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
…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 ✓)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description:
This PR implements visual feedback for long-running operations to improve user experience. Users were previously left wondering if the app was responsive during async operations like ZK proof generation, wallet connections, and data fetching.
Changes Made:
Skeleton loaders for emergency request lists
Added shimmering skeleton loaders for both active requests (openRequests) and user's personal requests (myRequests)
Uses consistent animation pattern with other loading states in the app
Prevents layout shift while data is being fetched
Enhanced ZK proof generation spinner
Replaced simple blinking indicator with a spinning animation for proof generation
Added descriptive status text: "generating proof...", "recording on-chain...", "proof ready ✓", etc.
Combined spin and pulse animations for better visual feedback during compute-intensive operations
Improved wallet connection loading states
Added loading spinner to wallet connection button when authentication is in progress
Updated form buttons to show "Connecting..." state instead of "Connect wallet first" during connection attempts
Maintains consistent purple (#7357FF) color scheme for wallet-related loading states
Better visual feedback across all async operations:
Location fetching
Wallet balance loading
Form submissions
Map search operations
Technical Details:
Added openRequestsLoading state to track active requests fetching
Added walletConnecting state for wallet authentication flow
Enhanced existing zkStatus indicators with better animations
Used CSS keyframe animations that match the app's design system
All loading states are accessible with proper ARIA labels
Testing:
✅ Verified skeleton loaders appear during data fetching
✅ Tested ZK proof spinner during generation and recording phases
✅ Confirmed wallet connection states work correctly
✅ Checked all loading states disappear when operations complete
Fixes:
Resolves UX issue where users couldn't tell if async operations were in progress
Prevents users from clicking buttons multiple times during loading
Provides clear visual feedback for compute-intensive operations like ZK proofs
Closes #72
Closes #71
Closes #70
Closes #69