From 5e0ca1795ec0796ce748724a6feb552166f91f23 Mon Sep 17 00:00:00 2001
From: aaron roworth <aaronroworth@gmail.com>
Date: Thu, 30 May 2024 11:19:53 +1000
Subject: [PATCH] ON-40851 # fixed ArcGIS web map layer panel showing if map is
 loaded on another page

---
 CHANGELOG.md                    |  1 +
 src/components/ArcGISWebMap.tsx | 32 ++++++++++++++++++--------------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e8f43f5a..f156be62 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - injected options referenced from another page not being injected into HTML
+- ArcGIS web map layer panel showing if map is loaded on another page
 
 ### Added
 
diff --git a/src/components/ArcGISWebMap.tsx b/src/components/ArcGISWebMap.tsx
index 49871674..35a4e6ec 100644
--- a/src/components/ArcGISWebMap.tsx
+++ b/src/components/ArcGISWebMap.tsx
@@ -80,6 +80,7 @@ function FormElementArcGISWebMap({ element, id, ...props }: Props) {
           content: layerList,
           expanded: element.showLayerPanel,
           mode: 'floating',
+          visible: false,
         })
 
         view.ui.add(layerPanelRef.current, 'top-right')
@@ -91,6 +92,7 @@ function FormElementArcGISWebMap({ element, id, ...props }: Props) {
           view,
           content: baseMapGallery,
           mode: 'floating',
+          visible: false,
         })
 
         view.ui.add(mapGalleryPanelRef.current, 'bottom-right')
@@ -116,22 +118,24 @@ function FormElementArcGISWebMap({ element, id, ...props }: Props) {
   }, [element])
 
   React.useEffect(() => {
-    if (isPageVisible) {
-      if (layerPanelRef.current) {
-        layerPanelRef.current.visible = true
-      }
-      if (mapGalleryPanelRef.current) {
-        mapGalleryPanelRef.current.visible = true
-      }
-    } else if (!isPageVisible) {
-      if (layerPanelRef.current) {
-        layerPanelRef.current.visible = false
-      }
-      if (mapGalleryPanelRef.current) {
-        mapGalleryPanelRef.current.visible = false
+    if (!isLoading) {
+      if (isPageVisible) {
+        if (layerPanelRef.current) {
+          layerPanelRef.current.visible = true
+        }
+        if (mapGalleryPanelRef.current) {
+          mapGalleryPanelRef.current.visible = true
+        }
+      } else if (!isPageVisible) {
+        if (layerPanelRef.current) {
+          layerPanelRef.current.visible = false
+        }
+        if (mapGalleryPanelRef.current) {
+          mapGalleryPanelRef.current.visible = false
+        }
       }
     }
-  }, [isPageVisible])
+  }, [isPageVisible, isLoading])
 
   if (loadError) {
     return (