UPDATE

Dockerfile

@@ -30,7 +30,10 @@ FROM base AS deps
 WORKDIR /app
 
 COPY package.json package-lock.json ./
-RUN npm ci --ignore-scripts
+
+# استفاده از کش داکر برای npm (تغییر اصلی در این بخش انجام شده است)
+RUN --mount=type=cache,target=/root/.npm \
+    npm ci --ignore-scripts
 
 # ---- build stage ----
 FROM base AS builder

src/views/dashboards/farm/cropZoning/CropZoningMap.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useEffect, useRef, useCallback } from 'react'
+import { useEffect, useRef, useCallback, useState } from 'react'
 import type L from 'leaflet'
 import 'leaflet/dist/leaflet.css'
 import 'leaflet-draw/dist/leaflet.draw.css'
@@ -49,6 +49,7 @@ export default function CropZoningMap({
   const drawnItemsRef = useRef<L.FeatureGroup | null>(null)
   const drawControlRef = useRef<L.Control.Draw | null>(null)
   const zonesLayerRef = useRef<L.GeoJSON | null>(null)
+  const [isMapReady, setIsMapReady] = useState(false)
 
   const renderZonesFromApi = useCallback(
     (map: L.Map, zones: ZoneMapData[]) => {
@@ -217,8 +218,10 @@ export default function CropZoningMap({
       }
 
       mapInstanceRef.current = map
+      setIsMapReady(true)
 
       cleanupFn = () => {
+        setIsMapReady(false)
         if (!readOnly) {
           map.off(L.Draw.Event.CREATED, onCreated)
           map.off(L.Draw.Event.EDITED, onEdited)
@@ -245,14 +248,17 @@ export default function CropZoningMap({
   }, [])
 
   useEffect(() => {
-    if (!mapInstanceRef.current) return
+    if (!isMapReady || !mapInstanceRef.current) return
+
+    mapInstanceRef.current.invalidateSize()
+
     if (zonesData && zonesData.length > 0) {
       renderZonesFromApi(mapInstanceRef.current, zonesData)
     } else if (zonesLayerRef.current) {
       mapInstanceRef.current.removeLayer(zonesLayerRef.current)
       zonesLayerRef.current = null
     }
-  }, [zonesData, optimizationKey, renderZonesFromApi])
+  }, [isMapReady, zonesData, optimizationKey, renderZonesFromApi])
 
 
   return (