added a condition to wait for the map to load before mapping objects

src/client/components/OfficeFloorMap.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEventHandler } from 'react'
+import React, { MouseEventHandler, useState } from 'react'
 import { Avatar, Button, P } from '#client/components/ui'
 import {
  OfficeArea,
@@ -104,6 +104,7 @@ export const OfficeFloorMap: React.FC<OfficeFloorMapProps> = ({
  clickablePoints,
  onToggle,
 }) => {
+ const [isMapLoaded, setIsMapLoaded] = useState(false)
  const me = useStore(stores.me)
  const initialStartPosition = selectedPointId
  ? mappablePoints?.find(
@@ -208,8 +209,9 @@ export const OfficeFloorMap: React.FC<OfficeFloorMapProps> = ({
  src={area.map}
  alt={`${area.name} floor plan`}
  className="opacity-80"
+ onLoad={() => setIsMapLoaded(true)}
  />
- {mapObjects(1)}
+ {isMapLoaded && mapObjects(1)}
  </div>
  <div
  className={cn(

src/client/components/ui/ImageWithPanZoom.tsx

@@ -21,6 +21,7 @@ export const ImageWithPanZoom = ({
  containerClassName,
 }: ImageWithPanZoomProps) => {
  const [imgScale, setImgScale] = useState(1)
+ const [isMapLoaded, setIsMapLoaded] = useState(false)
  const containerRef = useRef(null)
  const imageRef = useRef(null)
  const panZoomRef = useRef(null)
@@ -65,11 +66,14 @@ export const ImageWithPanZoom = ({
  'max-w-auto max-h-[720px] m-auto object-cover',
  className
  )}
+ onLoad={() => setIsMapLoaded(true)}
  />
- <div className="absolute top-0 left-0 w-full h-full">
- {/* passing scale so we can do reverse scaling on the mapped points */}
- {imageOverlayMappingFn(imgScale)}
- </div>
+ {isMapLoaded && (
+ <div className="absolute top-0 left-0 w-full h-full">
+ {/* passing scale so we can do reverse scaling on the mapped points */}
+ {imageOverlayMappingFn(imgScale)}
+ </div>
+ )}
  </div>
  </PanZoom>
  </div>