spinner when switching map src

src/client/components/OfficeFloorMap.tsx

@@ -1,5 +1,5 @@
-import React, { MouseEventHandler, useState } from 'react'
-import { Avatar, Button, P } from '#client/components/ui'
+import React, { MouseEventHandler, useEffect, useState } from 'react'
+import { Avatar, Button, LoaderSpinner, P } from '#client/components/ui'
 import {
   OfficeArea,
   OfficeAreaDesk,
@@ -105,6 +105,10 @@ export const OfficeFloorMap: React.FC<OfficeFloorMapProps> = ({
   onToggle,
 }) => {
   const [isMapLoaded, setIsMapLoaded] = useState(false)
+  const maprSrc = React.useMemo(() => {
+    !panZoom && setIsMapLoaded(false)
+    return area.map
+  }, [area])
   const me = useStore(stores.me)
   const initialStartPosition = selectedPointId
     ? mappablePoints?.find(
@@ -205,8 +209,9 @@ export const OfficeFloorMap: React.FC<OfficeFloorMapProps> = ({
   return (
     <div className="relative">
       <div className={cn(!!panZoom ? 'hidden' : 'block')}>
+        {!isMapLoaded && <LoaderSpinner />}
         <img
-          src={area.map}
+          src={maprSrc}
           alt={`${area.name} floor plan`}
           className="opacity-80"
           onLoad={() => setIsMapLoaded(true)}

src/client/components/ui/ImageWithPanZoom.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from 'react'
 import { cn } from '#client/utils'
 //@ts-ignore
 import { PanZoom, OnStateChangeData } from 'react-easy-panzoom'
+import { LoaderSpinner } from './Loader'
 
 type ImageWithPanZoomProps = {
   src: string
@@ -22,6 +23,10 @@ export const ImageWithPanZoom = ({
 }: ImageWithPanZoomProps) => {
   const [imgScale, setImgScale] = useState(1)
   const [isMapLoaded, setIsMapLoaded] = useState(false)
+  const maprSrc = React.useMemo(() => {
+    setIsMapLoaded(false)
+    return src
+  }, [src])
   const containerRef = useRef(null)
   const imageRef = useRef(null)
   const panZoomRef = useRef(null)
@@ -49,6 +54,7 @@ export const ImageWithPanZoom = ({
         containerClassName
       )}
     >
+      {!isMapLoaded && <LoaderSpinner />}
       <PanZoom
         enableBoundingBox
         maxZoom={2}
@@ -60,7 +66,7 @@ export const ImageWithPanZoom = ({
         <div className="relative touch-none">
           <img
             ref={imageRef}
-            src={src}
+            src={maprSrc}
             alt={alt}
             className={cn(
               'max-w-auto max-h-[720px] m-auto object-cover',