fix: fixed bug from issue #1369 #1382
Conversation
Rolled back the formatting of the <FullScreenMap.tsx> file to its previous appearance. There are no functional changes — the original design of the code has been returned, accidental format changes have been removed.
fix: bugs fixed after review(2)
There was a problem hiding this comment.
Pull Request Overview
This PR implements loading and error handling for the GlobalMap component to fix issue #1369. The changes add visual feedback during map loading and provide a user-friendly error recovery mechanism when the map fails to load.
Key Changes
- Added loading state with spinner and timeout mechanism (10 seconds)
- Implemented error handling for map load failures with error event listener
- Created error UI with reload functionality to recover from map errors
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| setIsLoading(false) | ||
| setHasError(false) | ||
|
|
There was a problem hiding this comment.
Trailing whitespace on line 107 should be removed to maintain clean code formatting.
|
|
||
| useEffect(() => { | ||
| if (!mapInstance) return | ||
| const handleError = (err: any) => { |
There was a problem hiding this comment.
The error parameter type is 'any' which bypasses type safety. Consider using a more specific type like 'Error' or 'MapboxError' if available from the map library.
| const handleError = (err: any) => { | |
| const handleError = (err: Error) => { |
| <div className='relative w-full h-full'> | ||
| <Map | ||
| {hasError && ( | ||
| <div className="absolute inset-0 flex items-center justify-center bg-white/20 "> |
There was a problem hiding this comment.
Trailing space inside the className string should be removed for cleaner code.
| <div className="absolute inset-0 flex items-center justify-center bg-white/20 "> | |
| <div className="absolute inset-0 flex items-center justify-center bg-white/20"> |
| </div> | ||
| )} | ||
|
|
||
| {!hasError &&<Map |
There was a problem hiding this comment.
Missing space between '&&' and '<Map' reduces readability. Add a space for proper formatting.
| {!hasError &&<Map | |
| {!hasError && <Map |
| )} | ||
| {children} | ||
| </Map> | ||
| </Map>} |
There was a problem hiding this comment.
[nitpick] The closing JSX brace should be on the same line as '' or properly indented on a new line for better readability.
| </Map>} | |
| </Map> | |
| } |
1 participant
This Pull request Fixes #1369
Adding a loading screen and error message with a restart button.
Type of PR.
Description
Added loading and error state handling for the map:
Related Issues
issue #1369
What this PR achieves
Screenshots
Loading Error
Normal loading