owenrees/echecsfrance
1
0
Fork 0
mirror of https://github.com/TheRealOwenRees/echecsfrance.git synced 2026-07-23 04:26:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use useTransition for faster UI

Browse Source
This commit is contained in:
Timothy Armes
2023-10-10 17:00:37 +02:00
committed by Owen Rees
parent f2a245ba6d
commit 44bfe17c8f
2 changed files with 16 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/MapEvents.tsx
+6 -3
View File
@@ -1,4 +1,4 @@
import { useEffect } from "react";
import { useEffect, useTransition } from "react";
import { useSetAtom } from "jotai";
import L from "leaflet";
@@ -8,6 +8,7 @@ import { mapBoundsAtom } from "@/app/atoms";
const MapEvents = () => {
const setMapBounds = useSetAtom(mapBoundsAtom);
const [isPending, startTransition] = useTransition();
const worldBounds = L.latLngBounds(L.latLng(-90, -180), L.latLng(90, 180));
const franceBounds = L.latLngBounds(
@@ -17,10 +18,12 @@ const MapEvents = () => {
const map = useMapEvent("moveend", () => {
// Set the map bounds atoms when the user pans/zooms
setMapBounds(map.getBounds());
startTransition(() => {
setMapBounds(map.getBounds());
});
});
// viewport agnostic centering of France & max world bounds
// Viewport agnostic centering of France & max world bounds
useEffect(() => {
map.setView(franceBounds.getCenter(), map.getBoundsZoom(franceBounds));
map.setMaxBounds(worldBounds);