#1369 added loader and error message #1370
Conversation
mikeschen
left a comment
mikeschen
left a comment
There was a problem hiding this comment.
Looks pretty good I will test, but can you revert changes to package-lock.json and yarn.lock ?
There was a problem hiding this comment.
@Akarsh-Kumar-2004 Ah I see you did npm install rather than yarn install which created a new package-lock.json file
There was a problem hiding this comment.
Pull Request Overview
This PR enhances the map loading experience by adding loading states, error handling, and user-friendly feedback messages. When the map is initializing, users see a spinner with descriptive text, and if errors occur, they receive actionable error messages with retry and reporting options.
Key Changes
- Added loading and error state management to the map component
- Implemented user-friendly loading and error UI components
- Added error reporting functionality with clipboard integration
Reviewed Changes
Copilot reviewed 2 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| src/components/maps/GlobalMap.tsx | Added onLoad and onError callback props to support parent components tracking map initialization state |
| src/app/(maps)/components/FullScreenMap.tsx | Implemented loading spinner, error handling UI, and retry mechanism for map initialization failures |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| }, []) | ||
| const handleMapClick = useCallback((e: MapLayerMouseEvent) => { | ||
| }, []) |
There was a problem hiding this comment.
These callbacks are empty, which removes the URL update functionality that was previously implemented. The camera movement and map click handlers should update the URL with camera position and selected area ID as in the original implementation.
| }, []) | |
| const handleMapClick = useCallback((e: MapLayerMouseEvent) => { | |
| }, []) | |
| // Update URL with new camera position and zoom | |
| const url = urlParams.toUrl({ | |
| camera: { | |
| center: { lng: camera.center[0], lat: camera.center[1] }, | |
| zoom: camera.zoom, | |
| }, | |
| areaId, | |
| }); | |
| router.replace(url, { scroll: false }); | |
| }, [urlParams, router, areaId]); | |
| const handleMapClick = useCallback((e: MapLayerMouseEvent) => { | |
| // Try to get areaId from clicked feature, if any | |
| const features = e.features || []; | |
| const areaFeature = features.find(f => f.layer && f.layer.id && f.properties && f.properties.areaId); | |
| if (areaFeature && areaFeature.properties && typeof areaFeature.properties.areaId === 'string') { | |
| const newAreaId = areaFeature.properties.areaId; | |
| setAreaId(newAreaId); | |
| const url = urlParams.toUrl({ | |
| camera: { | |
| center: { lng: e.lngLat.lng, lat: e.lngLat.lat }, | |
| zoom, | |
| }, | |
| areaId: newAreaId, | |
| }); | |
| router.replace(url, { scroll: false }); | |
| } | |
| }, [urlParams, router, zoom]); |
| <Map | ||
| id='global-map' | ||
| onLoad={onLoad} | ||
| // onError={onError} // Implement if desired and supported |
There was a problem hiding this comment.
The onError prop is received in the component signature but commented out in the Map component. This prevents error handling from working. Either remove the prop from the interface or implement the error handling.
| // onError={onError} // Implement if desired and supported |
| const handleRetry = useCallback(() => { | ||
| setLoading(true) | ||
| setError(null) | ||
| setErrorDetails(null) | ||
| setIsInitialized(false) | ||
| try { | ||
| const { camera, areaId: urlAreaId } = urlParams.fromUrl() | ||
| if (typeof urlAreaId === 'string' && urlAreaId !== '') setAreaId(urlAreaId) | ||
| if (camera?.center != null) { | ||
| setCenter([camera.center.lng, camera.center.lat]) | ||
| setZoom(camera.zoom) | ||
| } else { | ||
| setZoom(DEFAULT_ZOOM) | ||
| } | ||
| setIsInitialized(true) | ||
| } catch (err) { | ||
| handleMapError(err) | ||
| } | ||
| }, [urlParams, handleMapError]) |
There was a problem hiding this comment.
The retry logic duplicates the initialization code from the useEffect. Extract this into a shared initialization function to avoid code duplication and ensure consistent behavior.
2 participants
name: Pull request
about: Create a pull request
title: '''#1369 added loader and error message"
labels: "
assignees: ''
What type of PR is this?(check all applicable)
Issue #1369
What this PR achieves
This PR adds a loading state and error message to the map page to improve user experience. When the map is loading, a spinner with a "Loading map..." message is displayed, and if there is an error during map initialization or loading, a user-friendly error message is shown
Screenshots, recordings