fix(web): zoom to layer could go underground on first trigger #1242
Conversation
WalkthroughThe changes in this pull request modify the Changes
Suggested labels
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
✅ Deploy Preview for reearth-web ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (2)
web/src/beta/features/Editor/Map/LayersPanel/LayerItem.tsx (2)
58-58: Optimize useCallback dependencies to prevent unnecessary re-renders.The dependency array includes the entire
layerobject, but the function only useslayer.idandlayer.config.data.type.Consider destructuring only the required properties:
}, [layer, handleFlyTo]); +}, [layer.id, layer.config?.data?.type, handleFlyTo]);
50-58: Enhance user experience during zoom operations.The current implementation might lead to a confusing user experience as there's no indication of the ongoing zoom operation or its potential retry.
Consider these UX improvements:
- Add a loading indicator during the zoom operation
- Provide a way to cancel the operation
- Add visual feedback when the second zoom is triggered
Example implementation:
const [isZooming, setIsZooming] = useState(false); const zoomTimeoutRef = useRef<NodeJS.Timeout>(); const handleZoomToLayer = useCallback(() => { setIsZooming(true); handleFlyTo?.(layer.id, { duration: 0 }); if (["geojson", "kml"].includes(layer.config?.data?.type)) { zoomTimeoutRef.current = setTimeout(() => { handleFlyTo?.(layer.id, { duration: 0 }); setIsZooming(false); }, 800); } else { setIsZooming(false); } return () => { if (zoomTimeoutRef.current) { clearTimeout(zoomTimeoutRef.current); setIsZooming(false); } }; }, [layer.id, layer.config?.data?.type, handleFlyTo]);Then update the IconButton to show loading state:
<IconButton key="zoom" icon="crosshair" size="small" appearance="simple" + loading={isZooming} onClick={handleZoomToLayer} />
|
Works for me. Nice fix! |
Overview
There's one issue from core (from cesium in the end)
Currently i don't have a good solution, for workaround just trigger a second fly for certain type of layers. The delay time could be related with internet speed so it could be not stable as well.
What I've done
What I haven't done
How I tested
Which point I want you to review particularly
Memo
Summary by CodeRabbit
New Features
Bug Fixes