Use useTransition for faster UI

components/MapEvents.tsx

@@ -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);

components/SearchBar.tsx

@@ -1,3 +1,5 @@
+import { useTransition } from "react";
+
 import { useAtom } from "jotai/index";
 import { useTranslations } from "next-intl";
 import { IoCloseOutline } from "react-icons/io5";
@@ -7,6 +9,13 @@ import { searchStringAtom } from "@/app/atoms";
 const SearchBar = () => {
   const t = useTranslations("Tournaments");
   const [searchString, setSearchString] = useAtom(searchStringAtom);
+  const [isPending, startTransition] = useTransition();
+
+  const updateSearchString = (str: string) => {
+    startTransition(() => {
+      setSearchString(str);
+    });
+  };
 
   return (
     <div className="bg-white dark:bg-gray-800">
@@ -43,7 +52,7 @@ const SearchBar = () => {
           className="block rounded-lg border border-gray-300 bg-gray-50 p-2.5 px-10 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500  dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
           placeholder={t("searchPlaceholder")}
           value={searchString}
-          onChange={(e) => setSearchString(e.target.value)}
+          onChange={(e) => updateSearchString(e.target.value)}
         />
       </div>
     </div>