diff --git a/assets/js/hooks/Mapper/components/mapWrapper/hooks/useCommonMapEventProcessor.ts b/assets/js/hooks/Mapper/components/mapWrapper/hooks/useCommonMapEventProcessor.ts index 7c8d9967..32c37fd4 100644 --- a/assets/js/hooks/Mapper/components/mapWrapper/hooks/useCommonMapEventProcessor.ts +++ b/assets/js/hooks/Mapper/components/mapWrapper/hooks/useCommonMapEventProcessor.ts @@ -1,7 +1,8 @@ -import { MutableRefObject, useCallback, useEffect, useRef } from 'react'; -import { Command, Commands, MapHandlers } from '@/hooks/Mapper/types'; import { MapEvent } from '@/hooks/Mapper/events'; +import { useThrottle } from '@/hooks/Mapper/hooks'; import { useMapRootState } from '@/hooks/Mapper/mapRootProvider'; +import { Command, Commands, MapHandlers } from '@/hooks/Mapper/types'; +import { MutableRefObject, useCallback, useEffect, useRef } from 'react'; export const useCommonMapEventProcessor = () => { const mapRef = useRef() as MutableRefObject; @@ -26,9 +27,16 @@ export const useCommonMapEventProcessor = () => { mapRef.current?.command(name, data); }, []); - useEffect(() => { - refQueue.current.forEach(x => mapRef.current?.command(x.name, x.data)); + const processQueue = useCallback(() => { + const commands = [...refQueue.current]; refQueue.current = []; + commands.forEach(x => mapRef.current?.command(x.name, x.data)); + }, []); + + const throttledProcessQueue = useThrottle(processQueue, 200); + + useEffect(() => { + throttledProcessQueue(); }, [systems]); return { diff --git a/assets/js/hooks/Mapper/hooks/index.ts b/assets/js/hooks/Mapper/hooks/index.ts index 584b367d..97b9e4ce 100644 --- a/assets/js/hooks/Mapper/hooks/index.ts +++ b/assets/js/hooks/Mapper/hooks/index.ts @@ -1,5 +1,6 @@ -export * from './usePageVisibility'; +export * from './useActualizeSettings'; export * from './useClipboard'; export * from './useHotkey'; +export * from './usePageVisibility'; export * from './useSkipContextMenu'; -export * from './useActualizeSettings'; +export * from './useThrottle'; diff --git a/assets/js/hooks/Mapper/hooks/useThrottle.ts b/assets/js/hooks/Mapper/hooks/useThrottle.ts new file mode 100644 index 00000000..4d393958 --- /dev/null +++ b/assets/js/hooks/Mapper/hooks/useThrottle.ts @@ -0,0 +1,13 @@ +import { useCallback, useRef } from 'react'; + +export const useThrottle = (callback: any, limit: number) => { + const lastCallRef = useRef(0); + const throttledCallback = useCallback(() => { + const now = Date.now(); + if (now - lastCallRef.current >= limit) { + lastCallRef.current = now; + callback(); + } + }, [callback, limit]); + return throttledCallback; +}; diff --git a/lib/wanderer_app_web/live/map/map_live.ex b/lib/wanderer_app_web/live/map/map_live.ex index 7e4627ae..d59674c1 100644 --- a/lib/wanderer_app_web/live/map/map_live.ex +++ b/lib/wanderer_app_web/live/map/map_live.ex @@ -4,8 +4,6 @@ defmodule WandererAppWeb.MapLive do require Logger - @server_event_unsync_timeout :timer.minutes(2) - @impl true def mount(%{"slug" => map_slug} = _params, _session, socket) when is_connected?(socket) do Process.send_after(self(), %{event: :load_map}, Enum.random(10..800)) @@ -96,16 +94,10 @@ defmodule WandererAppWeb.MapLive do |> push_navigate(to: ~p"/tracking/#{map_slug}")} @impl true - def handle_info(%{timestamp: timestamp} = info, %{assigns: %{map_slug: map_slug}} = socket) do - duration = DateTime.diff(DateTime.utc_now(), timestamp, :millisecond) - - if duration > @server_event_unsync_timeout do - {:noreply, socket |> push_navigate(to: ~p"/#{map_slug}")} - else - {:noreply, - socket - |> WandererAppWeb.MapEventHandler.handle_event(info)} - end + def handle_info(info, %{assigns: %{map_slug: map_slug}} = socket) do + {:noreply, + socket + |> WandererAppWeb.MapEventHandler.handle_event(info)} end @impl true