From 049e7e5ac5a27dda28152ae7883217a8c57dfc0b Mon Sep 17 00:00:00 2001
From: jolevesq <johann.levesque@nrcan-rncan.gc.ca>
Date: Thu, 5 Dec 2024 10:40:44 -0500
Subject: [PATCH 1/2] refactor(common): Improve performance of common component
 Closes #2630

---
 .../core/components/common/use-lightbox.tsx   | 149 +++++++++++-------
 1 file changed, 91 insertions(+), 58 deletions(-)

diff --git a/packages/geoview-core/src/core/components/common/use-lightbox.tsx b/packages/geoview-core/src/core/components/common/use-lightbox.tsx
index 41947cc1d6b..badae399c20 100644
--- a/packages/geoview-core/src/core/components/common/use-lightbox.tsx
+++ b/packages/geoview-core/src/core/components/common/use-lightbox.tsx
@@ -1,79 +1,112 @@
-import { useState } from 'react';
+import { memo, useCallback, useState } from 'react';
 import { Box } from '@/ui';
 import { LightBoxSlides, LightboxImg } from '@/core/components/lightbox/lightbox';
 import { useUIActiveTrapGeoView } from '@/core/stores/store-interface-and-intial-values/ui-state';
+import { logger } from '@/core/utils/logger';
 
+// Constants outside component to prevent recreating every render
+const FOCUS_DELAY = 250;
+const BASE64_IMAGE_PATTERN = /^data:image\/(png|jpeg|gif|webp);base64/;
+
+// Define props interface for BaseLightBoxComponent
+interface BaseLightBoxProps {
+  isLightBoxOpen: boolean;
+  slides: LightBoxSlides[];
+  slidesIndex: number;
+  imgScale?: number;
+  aliasIndex: string;
+  onExit: () => void;
+}
 interface UseLightBoxReturnType {
-  initLightBox: (images: string, alias: string, index: number | undefined, scale?: number) => void;
+  initLightBox: (images: string, alias: string, index?: number, scale?: number) => void;
   LightBoxComponent: () => JSX.Element;
 }
 
-/**
- * Custom Lightbox hook which handle rendering of the lightbox.
- * @returns {UseLightBoxReturnType}
- */
+// Memoized base component with props
+const BaseLightBoxComponent = memo(function BaseLightBoxComponent({
+  isLightBoxOpen,
+  slides,
+  slidesIndex,
+  imgScale,
+  aliasIndex,
+  onExit,
+}: BaseLightBoxProps) {
+  logger.logTraceRender('components/common/use-lightbox (BaseLightBoxComponent)');
+  // Store
+  const activeTrapGeoView = useUIActiveTrapGeoView();
+
+  // Callbacks
+  const handleLightboxExit = useCallback(() => {
+    onExit();
+
+    if (!activeTrapGeoView) return;
+
+    setTimeout(() => {
+      const element = document.querySelector(`.returnLightboxFocusItem-${aliasIndex}`) as HTMLElement;
+      if (element) {
+        element.focus();
+        element.classList.add('keyboard-focused');
+      }
+    }, FOCUS_DELAY);
+  }, [activeTrapGeoView, aliasIndex, onExit]);
+
+  if (!isLightBoxOpen) return <Box />;
+
+  return <LightboxImg open={isLightBoxOpen} slides={slides} index={slidesIndex} scale={imgScale} exited={handleLightboxExit} />;
+});
+
 export function useLightBox(): UseLightBoxReturnType {
-  // Internal state
+  // State
   const [isLightBoxOpen, setIsLightBoxOpen] = useState(false);
   const [slides, setSlides] = useState<LightBoxSlides[]>([]);
   const [slidesIndex, setSlidesIndex] = useState(0);
   const [imgScale, setImgScale] = useState<number | undefined>();
   const [aliasIndex, setAliasIndex] = useState('0');
 
-  // Store state
-  const activeTrapGeoView = useUIActiveTrapGeoView();
-
-  /**
-   * Initialize lightbox with state.
-   * @param {string} images images url formatted as string and joined with ';' identifier.
-   * @param {string} alias alt tag for the image.
-   * @param {number | undefined} index index of the image which is displayed.
-   */
-  const initLightBox = (images: string, alias: string, index: number | undefined, scale?: number): void => {
-    setIsLightBoxOpen(true);
-    let slidesList = [];
-    if (images.startsWith('data:image/png;base64')) {
-      // special case - check if image is base64 and its a single image
-      slidesList = [{ src: images, alt: alias, downloadUrl: '' }];
-    } else {
-      slidesList = images.split(';').map((item) => ({ src: item, alt: alias, downloadUrl: item }));
+  // Callbacks
+  const createSlidesList = useCallback((images: string, alias: string): LightBoxSlides[] => {
+    if (BASE64_IMAGE_PATTERN.test(images)) {
+      return [{ src: images, alt: alias, downloadUrl: '' }];
     }
-    setSlides(slidesList);
-    setSlidesIndex(index ?? 0);
-    setImgScale(scale);
-    setAliasIndex(alias.split('_')[0]);
-  };
+    return images.split(';').map((item) => ({
+      src: item,
+      alt: alias,
+      downloadUrl: item,
+    }));
+  }, []);
 
-  /**
-   * Create LightBox Component based on lightbox is opened or not.
-   * @returns {JSX.Element}
-   */
-  function LightBoxComponent(): JSX.Element {
-    // TODO: fix bug https://github.com/Canadian-Geospatial-Platform/geoview/issues/2553
-    return isLightBoxOpen ? (
-      <LightboxImg
-        open={isLightBoxOpen}
-        slides={slides}
-        index={slidesIndex}
-        scale={imgScale}
-        exited={() => {
-          setIsLightBoxOpen(false);
-          setSlides([]);
-          setSlidesIndex(0);
+  const handleExit = useCallback(() => {
+    setIsLightBoxOpen(false);
+    setSlides([]);
+    setSlidesIndex(0);
+  }, []);
 
-          // If keyboard navigation mode enable, focus to caller item (with timeout so keyboard-focused class can be applied)
-          if (activeTrapGeoView) {
-            setTimeout(() => {
-              const element = document.querySelector(`.returnLightboxFocusItem-${aliasIndex}`) as HTMLElement;
-              element?.focus();
-              element?.classList.add('keyboard-focused');
-            }, 250);
-          }
-        }}
+  const initLightBox = useCallback(
+    (images: string, alias: string, index?: number, scale?: number): void => {
+      setIsLightBoxOpen(true);
+      setSlides(createSlidesList(images, alias));
+      setSlidesIndex(index ?? 0);
+      setImgScale(scale);
+      setAliasIndex(alias.split('_')[0]);
+    },
+    [createSlidesList]
+  );
+
+  const LightBoxComponent = useCallback(() => {
+    return (
+      <BaseLightBoxComponent
+        isLightBoxOpen={isLightBoxOpen}
+        slides={slides}
+        slidesIndex={slidesIndex}
+        imgScale={imgScale}
+        aliasIndex={aliasIndex}
+        onExit={handleExit}
       />
-    ) : (
-      <Box />
     );
-  }
-  return { initLightBox, LightBoxComponent };
+  }, [isLightBoxOpen, slides, slidesIndex, imgScale, aliasIndex, handleExit]);
+
+  return {
+    initLightBox,
+    LightBoxComponent,
+  };
 }

From 1801bdbcea79d3622a17640889da8784a050f58f Mon Sep 17 00:00:00 2001
From: Johann Levesque <johann.levesque@canada.ca>
Date: Fri, 6 Dec 2024 09:57:01 -0500
Subject: [PATCH 2/2] Fix other component

---
 .../common/focus-trap-container.tsx           |  65 ++++---
 .../components/common/full-screen-dialog.tsx  |  31 ++-
 .../src/core/components/common/layer-icon.tsx | 178 +++++++++++-------
 .../src/core/components/common/layer-list.tsx |  91 ++++-----
 .../src/core/components/common/layout.tsx     |  32 +++-
 .../common/responsive-grid-layout.tsx         |   2 +-
 .../components/common/responsive-grid.tsx     | 116 +++++++-----
 .../common/use-footer-panel-height.tsx        | 153 ++++++++-------
 .../layer-state.ts                            |   2 +-
 .../src/core/utils/useWhatChanged.ts          |  14 ++
 10 files changed, 400 insertions(+), 284 deletions(-)

diff --git a/packages/geoview-core/src/core/components/common/focus-trap-container.tsx b/packages/geoview-core/src/core/components/common/focus-trap-container.tsx
index cf77069dcd6..9a9dba9c9e0 100644
--- a/packages/geoview-core/src/core/components/common/focus-trap-container.tsx
+++ b/packages/geoview-core/src/core/components/common/focus-trap-container.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, useEffect } from 'react';
+import { memo, ReactNode, useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { FocusTrap, Box, Button } from '@/ui';
 import { logger } from '@/core/utils/logger';
@@ -6,35 +6,65 @@ import { useUIActiveFocusItem, useUIActiveTrapGeoView, useUIStoreActions } from
 import { TypeContainerBox } from '@/core/types/global-types';
 import { CONTAINER_TYPE } from '@/core/utils/constant';
 
-interface FocusTrapContainerType {
+interface FocusTrapContainerProps {
   children: ReactNode;
   id: string;
   containerType?: TypeContainerBox;
   open?: boolean;
 }
 
+// Constants outside component to prevent recreating every render
+const EXIT_BUTTON_STYLES = {
+  width: '95%',
+  margin: '10px auto',
+} as const;
+
+const FOCUS_DELAY = 0;
+
 /**
  * Focus trap container which will trap the focus when navigating through keyboard tab.
  * @param {TypeChildren} children dom elements wrapped in Focus trap.
  * @param {boolean} open enable and disabling of focus trap.
  * @returns {JSX.Element}
  */
-export function FocusTrapContainer({ children, open = false, id, containerType }: FocusTrapContainerType): JSX.Element {
-  // Log
+// Memoizes entire component, preventing re-renders if props haven't changed
+export const FocusTrapContainer = memo(function FocusTrapContainer({
+  children,
+  open = false,
+  id,
+  containerType,
+}: FocusTrapContainerProps): JSX.Element {
   logger.logTraceRender('component/common/FocusTrapContainer', containerType);
 
+  // Hooks
   const { t } = useTranslation<string>();
 
-  // get values from the store
+  // Store
   const { disableFocusTrap } = useUIStoreActions();
   const activeTrapGeoView = useUIActiveTrapGeoView();
   const focusItem = useUIActiveFocusItem();
 
-  const handleClose = (): void => {
+  // Callbacks
+  const handleClose = useCallback((): void => {
     disableFocusTrap(id);
-  };
+  }, [disableFocusTrap, id]);
+
+  // Memoize
+  const isActive = useMemo(() => id === focusItem.activeElementId || open, [id, focusItem.activeElementId, open]);
+
+  const showExitButton = useMemo(
+    () => containerType === CONTAINER_TYPE.FOOTER_BAR && activeTrapGeoView,
+    [containerType, activeTrapGeoView]
+  );
+
+  const exitButtonStyles = useMemo(
+    () => ({
+      ...EXIT_BUTTON_STYLES,
+      display: activeTrapGeoView ? 'block' : 'none',
+    }),
+    [activeTrapGeoView]
+  );
 
-  // #region REACT HOOKS
   // if keyboard navigation if turned off, remove trap settings
   useEffect(() => {
     // Log
@@ -49,22 +79,15 @@ export function FocusTrapContainer({ children, open = false, id, containerType }
     logger.logTraceUseEffect('FOCUS-TRAP-ELEMENT - focusItem', focusItem);
 
     if (id === focusItem.activeElementId) {
-      setTimeout(() => document.getElementById(`${id}-exit-btn`)?.focus(), 0);
+      setTimeout(() => document.getElementById(`${id}-exit-btn`)?.focus(), FOCUS_DELAY);
     }
   }, [focusItem, id]);
-  // #endregion
 
   return (
-    <FocusTrap open={id === focusItem.activeElementId || open} disableAutoFocus>
-      <Box tabIndex={id === focusItem.activeElementId || open ? 0 : -1} sx={{ height: '100%' }}>
-        {containerType === CONTAINER_TYPE.FOOTER_BAR && activeTrapGeoView && (
-          <Button
-            id={`${id}-exit-btn`}
-            type="text"
-            autoFocus
-            onClick={handleClose}
-            sx={{ display: activeTrapGeoView ? 'block' : 'none', width: '95%', margin: '10px auto' }}
-          >
+    <FocusTrap open={isActive} disableAutoFocus>
+      <Box tabIndex={isActive || open ? 0 : -1} sx={{ height: '100%' }}>
+        {showExitButton && (
+          <Button id={`${id}-exit-btn`} type="text" autoFocus onClick={handleClose} sx={exitButtonStyles}>
             {t('general.exit')}
           </Button>
         )}
@@ -72,4 +95,4 @@ export function FocusTrapContainer({ children, open = false, id, containerType }
       </Box>
     </FocusTrap>
   );
-}
+});
diff --git a/packages/geoview-core/src/core/components/common/full-screen-dialog.tsx b/packages/geoview-core/src/core/components/common/full-screen-dialog.tsx
index 9eb0f3f7ddd..832a942c66a 100644
--- a/packages/geoview-core/src/core/components/common/full-screen-dialog.tsx
+++ b/packages/geoview-core/src/core/components/common/full-screen-dialog.tsx
@@ -1,5 +1,5 @@
+import { memo, ReactNode } from 'react';
 import { DialogProps } from '@mui/material';
-import { ReactNode } from 'react';
 import { CloseIcon, Dialog, DialogContent, IconButton } from '@/ui';
 
 interface FullScreenDialogProps extends DialogProps {
@@ -8,17 +8,32 @@ interface FullScreenDialogProps extends DialogProps {
   children: ReactNode;
 }
 
-function FullScreenDialog({ open, onClose, children }: FullScreenDialogProps): JSX.Element {
+// Constant styles to prevent recreation on each render
+const DIALOG_CONTENT_STYLES = {
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'end',
+} as const;
+
+const CLOSE_BUTTON_STYLES = {
+  marginBottom: '1.5rem',
+} as const;
+
+// Memoizes entire component, preventing re-renders if props haven't changed
+export const FullScreenDialog = memo(function FullScreenDialog({
+  open,
+  onClose,
+  children,
+  ...dialogProps
+}: FullScreenDialogProps): JSX.Element {
   return (
-    <Dialog fullScreen maxWidth="xl" open={open} onClose={onClose} disablePortal>
-      <DialogContent sx={{ display: 'flex', flexDirection: 'column', alignItems: 'end' }}>
-        <IconButton onClick={onClose} color="primary" className="buttonFilledOutline" sx={{ marginBottom: '1.5rem' }}>
+    <Dialog fullScreen maxWidth="xl" open={open} onClose={onClose} disablePortal {...dialogProps}>
+      <DialogContent sx={DIALOG_CONTENT_STYLES}>
+        <IconButton onClick={onClose} color="primary" className="buttonFilledOutline" sx={CLOSE_BUTTON_STYLES}>
           <CloseIcon />
         </IconButton>
         {children}
       </DialogContent>
     </Dialog>
   );
-}
-
-export default FullScreenDialog;
+});
diff --git a/packages/geoview-core/src/core/components/common/layer-icon.tsx b/packages/geoview-core/src/core/components/common/layer-icon.tsx
index 1c007808f79..499f6acfe66 100644
--- a/packages/geoview-core/src/core/components/common/layer-icon.tsx
+++ b/packages/geoview-core/src/core/components/common/layer-icon.tsx
@@ -1,5 +1,7 @@
+import { memo, useCallback, useMemo } from 'react';
 import { useTheme } from '@mui/material/styles';
 import { Box, CircularProgressBase, ErrorIcon, GroupWorkOutlinedIcon, IconButton, BrowserNotSupportedIcon } from '@/ui';
+
 import { TypeLegendLayer } from '@/core/components/layers/types';
 import { getSxClasses } from './layer-icon-style';
 import { useIconLayerSet } from '@/core/stores/store-interface-and-intial-values/layer-state';
@@ -11,95 +13,129 @@ export interface TypeIconStackProps {
   onStackIconClick?: (e: React.KeyboardEvent<HTMLElement>) => void;
 }
 
+interface LayerIconProps {
+  layer: TypeLegendLayer | LayerListEntry;
+}
+
+// Constants outside component to prevent recreating every render
+const LOADING_BOX_STYLES = {
+  padding: '5px',
+  marginRight: '10px',
+} as const;
+
+const ICON_BUTTON_BASE_PROPS = {
+  color: 'primary' as const,
+  size: 'small' as const,
+  tabIndex: -1,
+  'aria-hidden': true,
+};
+
 /**
  * Icon Stack to represent layer icons
  *
  * @param {string} layerPath
  * @returns {JSX.Element} the icon stack item
  */
-function IconStack({ layerPath, onIconClick, onStackIconClick }: TypeIconStackProps): JSX.Element | null {
+// Memoizes entire component, preventing re-renders if props haven't changed
+const IconStack = memo(function IconStack({ layerPath, onIconClick, onStackIconClick }: TypeIconStackProps): JSX.Element | null {
+  // Hooks
   const theme = useTheme();
   const sxClasses = getSxClasses(theme);
 
+  // Store
   const iconData = useIconLayerSet(layerPath);
 
-  const iconImage: string = iconData?.length > 0 ? iconData[0] : '';
-  const iconImageStacked: string = iconData?.length > 1 ? iconData[1] : '';
-  const numOfIcons: number | undefined = iconData?.length;
-
-  const iconStackContent = (): JSX.Element | null => {
-    if (numOfIcons === 1) {
-      return (
-        <IconButton
-          tabIndex={-1}
-          sx={sxClasses.iconPreview}
-          color="primary"
-          size="small"
-          onClick={iconImage === 'no data' ? undefined : onIconClick}
-          aria-hidden="true"
-        >
-          {iconImage === 'no data' ? (
-            <BrowserNotSupportedIcon />
-          ) : (
-            <Box sx={sxClasses.legendIcon}>
-              <Box component="img" alt="icon" src={iconImage} sx={sxClasses.maxIconImg} />
-            </Box>
-          )}
+  const { iconImage, iconImageStacked, numOfIcons } = useMemo(
+    () => ({
+      iconImage: iconData?.length > 0 ? iconData[0] : '',
+      iconImageStacked: iconData?.length > 1 ? iconData[1] : '',
+      numOfIcons: iconData?.length,
+    }),
+    [iconData]
+  );
+
+  const renderSingleIcon = useCallback(
+    (): JSX.Element => (
+      <IconButton {...ICON_BUTTON_BASE_PROPS} sx={sxClasses.iconPreview} onClick={iconImage === 'no data' ? undefined : onIconClick}>
+        {iconImage === 'no data' ? (
+          <BrowserNotSupportedIcon />
+        ) : (
+          <Box sx={sxClasses.legendIcon}>
+            <Box component="img" alt="icon" src={iconImage} sx={sxClasses.maxIconImg} />
+          </Box>
+        )}
+      </IconButton>
+    ),
+    [iconImage, onIconClick, sxClasses.iconPreview, sxClasses.legendIcon, sxClasses.maxIconImg]
+  );
+
+  const renderStackedIcons = useCallback(
+    (): JSX.Element => (
+      <Box tabIndex={-1} onClick={onIconClick} sx={sxClasses.stackIconsBox} onKeyDown={onStackIconClick} aria-hidden="true">
+        <IconButton {...ICON_BUTTON_BASE_PROPS} sx={sxClasses.iconPreviewStacked}>
+          <Box sx={sxClasses.legendIconTransparent}>
+            {iconImageStacked && <Box component="img" alt="icon" src={iconImageStacked} sx={sxClasses.maxIconImg} />}
+          </Box>
         </IconButton>
-      );
-    }
-    if (numOfIcons && numOfIcons > 0) {
-      return (
-        <Box tabIndex={-1} onClick={onIconClick} sx={sxClasses.stackIconsBox} onKeyDown={(e) => onStackIconClick?.(e)} aria-hidden="true">
-          <IconButton sx={sxClasses.iconPreviewStacked} color="primary" size="small" tabIndex={-1} aria-hidden="true">
-            <Box sx={sxClasses.legendIconTransparent}>
-              {iconImageStacked && <Box component="img" alt="icon" src={iconImageStacked} sx={sxClasses.maxIconImg} />}
-            </Box>
-          </IconButton>
-          <IconButton sx={sxClasses.iconPreviewHoverable} color="primary" size="small" tabIndex={-1} aria-hidden="true">
-            <Box sx={sxClasses.legendIcon}>{iconImage && <Box component="img" alt="icon" src={iconImage} sx={sxClasses.maxIconImg} />}</Box>
-          </IconButton>
-        </Box>
-      );
-    }
-    if (layerPath !== '' && iconData.length === 0 && layerPath.charAt(0) !== '!') {
-      return (
-        <Box tabIndex={-1} onClick={onIconClick} sx={sxClasses.stackIconsBox} onKeyDown={(e) => onStackIconClick?.(e)} aria-hidden="true">
-          <IconButton sx={sxClasses.iconPreviewStacked} color="primary" size="small" tabIndex={-1} aria-hidden="true">
-            <Box sx={sxClasses.legendIconTransparent}>
-              <BrowserNotSupportedIcon />
-            </Box>
-          </IconButton>
-        </Box>
-      );
-    }
-    return null;
-  };
-
-  return iconStackContent();
-}
+        <IconButton {...ICON_BUTTON_BASE_PROPS} sx={sxClasses.iconPreviewHoverable}>
+          <Box sx={sxClasses.legendIcon}>{iconImage && <Box component="img" alt="icon" src={iconImage} sx={sxClasses.maxIconImg} />}</Box>
+        </IconButton>
+      </Box>
+    ),
+    [
+      iconImage,
+      iconImageStacked,
+      onIconClick,
+      onStackIconClick,
+      sxClasses.iconPreviewHoverable,
+      sxClasses.iconPreviewStacked,
+      sxClasses.legendIcon,
+      sxClasses.legendIconTransparent,
+      sxClasses.maxIconImg,
+      sxClasses.stackIconsBox,
+    ]
+  );
 
-interface LayerIconProps {
-  layer: TypeLegendLayer | LayerListEntry;
-}
+  const renderNoDataIcon = useCallback(
+    (): JSX.Element => (
+      <Box tabIndex={-1} onClick={onIconClick} sx={sxClasses.stackIconsBox} onKeyDown={onStackIconClick} aria-hidden="true">
+        <IconButton {...ICON_BUTTON_BASE_PROPS} sx={sxClasses.iconPreviewStacked}>
+          <Box sx={sxClasses.legendIconTransparent}>
+            <BrowserNotSupportedIcon />
+          </Box>
+        </IconButton>
+      </Box>
+    ),
+    [onIconClick, onStackIconClick, sxClasses.iconPreviewStacked, sxClasses.legendIconTransparent, sxClasses.stackIconsBox]
+  );
 
-export function LayerIcon({ layer }: LayerIconProps): JSX.Element {
-  if (layer.layerStatus === 'error' || ('queryStatus' in layer && layer.queryStatus === 'error')) {
-    return <ErrorIcon color="error" />;
+  if (numOfIcons === 1) return renderSingleIcon();
+  if (numOfIcons && numOfIcons > 0) return renderStackedIcons();
+  if (layerPath !== '' && iconData.length === 0 && layerPath.charAt(0) !== '!') {
+    return renderNoDataIcon();
   }
-  if (
-    layer.layerStatus === 'processing' ||
-    layer.layerStatus === 'loading' ||
-    ('queryStatus' in layer && layer.queryStatus === 'processing')
-  ) {
+  return null;
+});
+
+export const LayerIcon = memo(function LayerIcon({ layer }: LayerIconProps): JSX.Element {
+  const isError = layer.layerStatus === 'error' || ('queryStatus' in layer && layer.queryStatus === 'error');
+
+  const isLoading =
+    layer.layerStatus === 'processing' || layer.layerStatus === 'loading' || ('queryStatus' in layer && layer.queryStatus === 'processing');
+
+  const hasChildren = 'children' in layer && layer?.children.length;
+
+  if (isError) return <ErrorIcon color="error" />;
+
+  if (isLoading) {
     return (
-      <Box sx={{ padding: '5px', marginRight: '10px' }}>
+      <Box sx={LOADING_BOX_STYLES}>
         <CircularProgressBase size={20} />
       </Box>
     );
   }
-  if ('children' in layer && layer?.children.length) {
-    return <GroupWorkOutlinedIcon color="primary" />;
-  }
+
+  if (hasChildren) return <GroupWorkOutlinedIcon color="primary" />;
+
   return <IconStack layerPath={layer.layerPath} />;
-}
+});
diff --git a/packages/geoview-core/src/core/components/common/layer-list.tsx b/packages/geoview-core/src/core/components/common/layer-list.tsx
index 52002143eb1..3b63210ad7e 100644
--- a/packages/geoview-core/src/core/components/common/layer-list.tsx
+++ b/packages/geoview-core/src/core/components/common/layer-list.tsx
@@ -32,16 +32,33 @@ interface LayerListItemProps {
   isSelected: boolean;
   layer: LayerListEntry;
   onListItemClick: (layer: LayerListEntry) => void;
-  layerIndex: number;
 }
 
-const LayerListItem = memo(function LayerListItem({ id, isSelected, layer, onListItemClick, layerIndex }: LayerListItemProps) {
+// Memoizes entire component, preventing re-renders if props haven't changed
+export const LayerListItem = memo(function LayerListItem({ id, isSelected, layer, onListItemClick }: LayerListItemProps) {
+  // Hooks
   const theme = useTheme();
   const sxClasses = getSxClasses(theme);
   const { t } = useTranslation<string>();
 
+  // Style
+  const listItemSpring = useSpring({
+    delay: 500,
+    from: { opacity: 0.1 },
+    to: { opacity: 1 },
+  });
+  const containerClass = [
+    'layer-panel',
+    'bordered',
+    layer.layerStatus ?? '',
+    `query-${layer.queryStatus}`,
+    isSelected ? 'selectedLayer bordered-primary' : '',
+  ]
+    .join(' ')
+    .trim();
+
+  // Constant for state
   const isDisabled = layer?.numOffeatures === 0 || layer?.features === null;
-
   const isLoading =
     layer?.numOffeatures === 0 ||
     layer?.features === null ||
@@ -49,18 +66,6 @@ const LayerListItem = memo(function LayerListItem({ id, isSelected, layer, onLis
     layer.layerStatus === 'loading' ||
     layer.layerStatus === 'processing';
 
-  /**
-   * Render Layer Icon based on layerPath
-   * @returns
-   */
-  const renderLayerIcon = (): JSX.Element | null => {
-    // If there is content, this is a guide section with no icon
-    if (layer.layerPath && !layer.content) {
-      return <LayerIcon layer={layer} />;
-    }
-    return null;
-  };
-
   /**
    * Get layer status based on query status and layer status
    */
@@ -78,39 +83,6 @@ const LayerListItem = memo(function LayerListItem({ id, isSelected, layer, onLis
     );
   }, [layer, t]);
 
-  /**
-   * Render Layer body.
-   * @returns JSX.Element
-   */
-  const renderLayerBody = (): JSX.Element => {
-    return (
-      <Box sx={sxClasses.listPrimaryText}>
-        <Typography className="layerTitle">{layer.layerName}</Typography>
-        <Box display="flex" alignContent="center">
-          <Typography component="p" variant="subtitle1" noWrap display="block">
-            {getLayerStatus()}
-          </Typography>
-        </Box>
-      </Box>
-    );
-  };
-
-  function getContainerClass(): string {
-    const result: string[] = ['layer-panel', 'bordered', layer.layerStatus ?? '', `query-${layer.queryStatus}`];
-
-    // if layer has selected child but its not itself selected
-    if (isSelected) {
-      result.push('selectedLayer bordered-primary');
-    }
-    return result.join(' ');
-  }
-
-  const listItemSpring = useSpring({
-    delay: layerIndex * 150,
-    from: { opacity: 0.1 },
-    to: { opacity: 1 },
-  });
-
   /**
    * Handle layer click when mouse enter is pressed.
    */
@@ -129,7 +101,7 @@ const LayerListItem = memo(function LayerListItem({ id, isSelected, layer, onLis
   const AnimatedPaper = animated(Paper);
 
   return (
-    <AnimatedPaper sx={{ marginBottom: '1rem' }} style={listItemSpring} className={getContainerClass()}>
+    <AnimatedPaper sx={{ marginBottom: '1rem' }} style={listItemSpring} className={containerClass}>
       <Tooltip title={layer.tooltip} placement="top" arrow>
         <Box>
           <ListItem
@@ -146,8 +118,15 @@ const LayerListItem = memo(function LayerListItem({ id, isSelected, layer, onLis
               disabled={isDisabled || isLoading}
               aria-label={layer.layerName}
             >
-              {renderLayerIcon()}
-              {renderLayerBody()}
+              {layer.layerPath && !layer.content && <LayerIcon layer={layer} />}
+              <Box sx={sxClasses.listPrimaryText}>
+                <Typography className="layerTitle">{layer.layerName}</Typography>
+                <Box display="flex" alignContent="center">
+                  <Typography component="p" variant="subtitle1" noWrap display="block">
+                    {getLayerStatus()}
+                  </Typography>
+                </Box>
+              </Box>
             </ListItemButton>
           </ListItem>
         </Box>
@@ -165,7 +144,9 @@ const LayerListItem = memo(function LayerListItem({ id, isSelected, layer, onLis
  * @param {Function} onListItemClick  Callback function excecuted when list item is clicked.
  * @returns {JSX.Element}
  */
-export function LayerList({ layerList, selectedLayerPath, onListItemClick }: LayerListProps): JSX.Element {
+// Memoizes entire component, preventing re-renders if props haven't changed
+export const LayerList = memo(function LayerList({ layerList, selectedLayerPath, onListItemClick }: LayerListProps): JSX.Element {
+  // Hooks
   const theme = useTheme();
   const sxClasses = getSxClasses(theme);
   const { t } = useTranslation<string>();
@@ -173,7 +154,7 @@ export function LayerList({ layerList, selectedLayerPath, onListItemClick }: Lay
   return (
     <List sx={sxClasses.list}>
       {!!layerList.length &&
-        layerList.map((layer, ind) => (
+        layerList.map((layer) => (
           <LayerListItem
             id={`${layer?.layerUniqueId ?? ''}`}
             key={layer.layerPath}
@@ -183,7 +164,6 @@ export function LayerList({ layerList, selectedLayerPath, onListItemClick }: Lay
             isSelected={(layer?.numOffeatures ?? 1) > 0 && layer.layerPath === selectedLayerPath}
             layer={layer}
             onListItemClick={onListItemClick}
-            layerIndex={ind}
           />
         ))}
       {!layerList.length && (
@@ -191,7 +171,6 @@ export function LayerList({ layerList, selectedLayerPath, onListItemClick }: Lay
           id="dummyPath"
           key="dummyPath"
           isSelected={false}
-          layerIndex={0}
           layer={
             {
               layerPath: '',
@@ -207,4 +186,4 @@ export function LayerList({ layerList, selectedLayerPath, onListItemClick }: Lay
       )}
     </List>
   );
-}
+});
diff --git a/packages/geoview-core/src/core/components/common/layout.tsx b/packages/geoview-core/src/core/components/common/layout.tsx
index 1fe7e821e62..c12e7046ca1 100644
--- a/packages/geoview-core/src/core/components/common/layout.tsx
+++ b/packages/geoview-core/src/core/components/common/layout.tsx
@@ -1,4 +1,4 @@
-import { useCallback, ReactNode, useRef, useMemo } from 'react';
+import { useCallback, ReactNode, useRef, useMemo, memo } from 'react';
 import { useTheme } from '@mui/material/styles';
 import { logger } from '@/core/utils/logger';
 import { LayerList, LayerListEntry } from './layer-list';
@@ -20,7 +20,18 @@ interface LayoutProps {
   onGuideIsOpen?: (isGuideOpen: boolean) => void;
 }
 
-export function Layout({
+// Constants outside component to prevent recreating every render
+const TITLE_STYLES = {
+  fontWeight: '600',
+  marginTop: '12px',
+  overflow: 'hidden',
+  display: '-webkit-box',
+  webkitBoxOrient: 'vertical',
+  webkitLineClamp: '2',
+} as const;
+
+// Memoizes entire component, preventing re-renders if props haven't changed
+export const Layout = memo(function Layout({
   children,
   guideContentIds,
   layerList,
@@ -31,10 +42,16 @@ export function Layout({
   onGuideIsOpen,
   containerType = CONTAINER_TYPE.FOOTER_BAR,
 }: LayoutProps): JSX.Element {
+  logger.logTraceRender('components/common/layout');
+
+  // Hooks
   const responsiveLayoutRef = useRef<ResponsiveGridLayoutExposedMethods>(null);
   const theme = useTheme();
 
+  // Store
   const { setSelectedFooterLayerListItemId } = useUIStoreActions();
+
+  // Callbacks
   /**
    * Handles clicks to layers in left panel. Sets selected layer.
    *
@@ -43,9 +60,11 @@ export function Layout({
   const handleLayerChange = useCallback(
     (layer: LayerListEntry): void => {
       onLayerListClicked?.(layer);
+
       // Show the panel (hiding the layers list in the process if we're on mobile)
       responsiveLayoutRef.current?.setIsRightPanelVisible(true);
       responsiveLayoutRef.current?.setRightPanelFocus();
+
       // set the focus item when layer item clicked.
       setSelectedFooterLayerListItemId(`${layer.layerUniqueId}`);
     },
@@ -78,15 +97,10 @@ export function Layout({
   const renderLayerTitle = useCallback((): JSX.Element => {
     // clamping code copied from https://tailwindcss.com/docs/line-clamp
     const sxClasses = {
+      ...TITLE_STYLES,
       fontSize: theme.palette.geoViewFontSize.lg,
       textAlign: fullWidth || containerType === CONTAINER_TYPE.APP_BAR ? 'center' : 'left',
       width: fullWidth || containerType === CONTAINER_TYPE.APP_BAR ? '100%' : 'auto',
-      fontWeight: '600',
-      marginTop: '12px',
-      overflow: 'hidden',
-      display: '-webkit-box',
-      webkitBoxOrient: 'vertical',
-      webkitLineClamp: '2',
       ...(!fullWidth && { [theme.breakpoints.up('md')]: { display: 'none' } }),
     };
 
@@ -113,4 +127,4 @@ export function Layout({
       containerType={containerType}
     />
   );
-}
+});
diff --git a/packages/geoview-core/src/core/components/common/responsive-grid-layout.tsx b/packages/geoview-core/src/core/components/common/responsive-grid-layout.tsx
index 152c0889c54..fb306f25555 100644
--- a/packages/geoview-core/src/core/components/common/responsive-grid-layout.tsx
+++ b/packages/geoview-core/src/core/components/common/responsive-grid-layout.tsx
@@ -6,7 +6,7 @@ import { Box, FullscreenIcon, ButtonGroup, Button } from '@/ui';
 import { ResponsiveGrid } from './responsive-grid';
 import { useFooterPanelHeight } from './use-footer-panel-height';
 import { getSxClasses } from './responsive-grid-layout-style';
-import FullScreenDialog from './full-screen-dialog';
+import { FullScreenDialog } from './full-screen-dialog';
 import { logger } from '@/core/utils/logger';
 import { ArrowBackIcon, ArrowForwardIcon, CloseIcon, QuestionMarkIcon } from '@/ui/icons';
 import { useAppGuide, useAppFullscreenActive } from '@/core/stores/store-interface-and-intial-values/app-state';
diff --git a/packages/geoview-core/src/core/components/common/responsive-grid.tsx b/packages/geoview-core/src/core/components/common/responsive-grid.tsx
index b79b31f46f6..1182c91a54a 100644
--- a/packages/geoview-core/src/core/components/common/responsive-grid.tsx
+++ b/packages/geoview-core/src/core/components/common/responsive-grid.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, forwardRef } from 'react';
+import { ReactNode, forwardRef, useMemo } from 'react';
 import { useTheme } from '@mui/material/styles';
 import { Grid, GridProps, SxProps } from '@/ui';
 
@@ -9,44 +9,68 @@ interface ResponsiveGridProps extends GridProps {
 interface ResponsiveGridPanelProps extends GridProps {
   children: ReactNode;
   isRightPanelVisible: boolean;
-  sxProps?: SxProps | undefined;
+  sxProps?: SxProps;
   isEnlarged: boolean;
   fullWidth?: boolean;
   className?: string;
 }
 
+type PanelSize = { xs: number } & Record<string, number>;
+
+// Constants outside component to prevent recreating every render
+const PADDING = '0 12px 12px 12px';
+const MOBILE_BREAKPOINT = 'md';
+const DEFAULT_PADDING_LEFT = '1rem';
+
+// Panel size configurations
+const PANEL_SIZES = {
+  default: { xs: 12 },
+  left: {
+    normal: { md: 4, lg: 4 },
+    enlarged: { md: 2, lg: 1.25 },
+  },
+  right: {
+    normal: { md: 8, lg: 8 },
+    enlarged: { md: 10, lg: 10.75 },
+  },
+} as const;
+
+/**
+ * Get the left panel grid width size
+ */
+const getLeftPanelSize = (fullWidth: boolean, isRightPanelVisible: boolean, isEnlarged: boolean): PanelSize => {
+  if (fullWidth) return PANEL_SIZES.default;
+
+  return {
+    xs: isRightPanelVisible ? 0 : 12,
+    ...(isEnlarged ? PANEL_SIZES.left.enlarged : PANEL_SIZES.left.normal),
+  };
+};
+
+/**
+ * Get the right panel grid width size
+ */
+const getRightPanelSize = (fullWidth: boolean, isRightPanelVisible: boolean, isEnlarged: boolean): PanelSize => {
+  if (fullWidth) return PANEL_SIZES.default;
+
+  return {
+    xs: !isRightPanelVisible ? 0 : 12,
+    ...(isEnlarged ? PANEL_SIZES.right.enlarged : PANEL_SIZES.right.normal),
+  };
+};
+
 /**
  * Create Responsive Grid Container
  * @param {ReactNode} children children to be renderer
  * @returns JSX.Element
  */
 const ResponsiveGridRoot = forwardRef(({ children, ...rest }: ResponsiveGridProps, ref) => (
-  <Grid component="div" container {...rest} paddingLeft={12} paddingRight={12} paddingBottom={12} ref={ref}>
+  <Grid component="div" container {...rest} padding={PADDING} ref={ref}>
     {children}
   </Grid>
 ));
 ResponsiveGridRoot.displayName = 'ResponsiveGridRoot';
 
-/**
- * Get the left panel grid width size based on fullwidth flag.
- * @param {boolean} fullWidth panel with is maximum.
- * @param {boolean} isRightPanelVisible right panel is visibel
- * @param {boolean} isEnlarged panel is enlarge
- * @returns {any}
- */
-// ? I doubt we want to define an explicit type for style properties?
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const getLeftPanelSize = (fullWidth: boolean, isRightPanelVisible: boolean, isEnlarged: boolean): any => {
-  if (fullWidth) {
-    return { xs: 12 };
-  }
-  return {
-    xs: isRightPanelVisible ? 0 : 12,
-    md: !isEnlarged ? 4 : 2,
-    lg: !isEnlarged ? 4 : 1.25,
-  };
-};
-
 /**
  * Create Left Panel for responsive grid.
  * @param {ReactNode} children child elements to be rendered
@@ -68,12 +92,22 @@ const ResponsiveGridLeftPanel = forwardRef(
     ref
   ) => {
     const theme = useTheme();
+
+    const displayStyles = useMemo(
+      () => ({
+        [theme.breakpoints.down(MOBILE_BREAKPOINT)]: {
+          display: isRightPanelVisible ? 'none' : 'block',
+        },
+      }),
+      [isRightPanelVisible, theme.breakpoints]
+    );
+
     return (
       <Grid
         className={className}
         size={getLeftPanelSize(fullWidth, isRightPanelVisible, isEnlarged)}
         sx={{
-          ...(!fullWidth && { [theme.breakpoints.down('md')]: { display: isRightPanelVisible ? 'none' : 'block' } }),
+          ...(!fullWidth && displayStyles),
           ...(fullWidth && { display: isRightPanelVisible ? 'none' : 'block' }),
           ...sxProps,
         }}
@@ -88,26 +122,6 @@ const ResponsiveGridLeftPanel = forwardRef(
 );
 ResponsiveGridLeftPanel.displayName = 'ResponsiveGridLeftPanel';
 
-/**
- * Get the right panel grid width size based on fullwidth flag.
- * @param {boolean} fullWidth panel with is maximum.
- * @param {boolean} isRightPanelVisible layer panel is visibel
- * @param {boolean} isEnlarged panel is enlarge
- * @returns {any}
- */
-// ? I doubt we want to define an explicit type for style properties?
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const getRightPanelSize = (fullWidth: boolean, isRightPanelVisible: boolean, isEnlarged: boolean): any => {
-  if (fullWidth) {
-    return { xs: 12 };
-  }
-  return {
-    xs: !isRightPanelVisible ? 0 : 12,
-    md: !isEnlarged ? 8 : 10,
-    lg: !isEnlarged ? 8 : 10.75,
-  };
-};
-
 /**
  * Create Right Panel for responsive grid.
  * @param {ReactNode} children child elements to be rendered
@@ -130,14 +144,24 @@ const ResponsiveGridRightPanel = forwardRef(
     ref
   ) => {
     const theme = useTheme();
+
+    const displayStyles = useMemo(
+      () => ({
+        [theme.breakpoints.down(MOBILE_BREAKPOINT)]: {
+          display: !isRightPanelVisible ? 'none' : 'block',
+        },
+      }),
+      [isRightPanelVisible, theme.breakpoints]
+    );
+
     return (
       <Grid
         className={className}
         size={getRightPanelSize(fullWidth, isRightPanelVisible, isEnlarged)}
         sx={{
           position: 'relative',
-          [theme.breakpoints.up('md')]: { paddingLeft: '1rem' },
-          ...(!fullWidth && { [theme.breakpoints.down('md')]: { display: !isRightPanelVisible ? 'none' : 'block' } }),
+          [theme.breakpoints.up(MOBILE_BREAKPOINT)]: { paddingLeft: DEFAULT_PADDING_LEFT },
+          ...(!fullWidth && displayStyles),
           ...(fullWidth && { display: !isRightPanelVisible ? 'none' : 'block' }),
           ...sxProps,
         }}
diff --git a/packages/geoview-core/src/core/components/common/use-footer-panel-height.tsx b/packages/geoview-core/src/core/components/common/use-footer-panel-height.tsx
index 78ef27fb928..1543c5078a8 100644
--- a/packages/geoview-core/src/core/components/common/use-footer-panel-height.tsx
+++ b/packages/geoview-core/src/core/components/common/use-footer-panel-height.tsx
@@ -29,98 +29,106 @@ interface UseFooterPanelHeightReturnType {
   activeFooterBarTabId: string;
 }
 
+// Constants outside component to prevent recreating every render
+const DEFAULT_HEIGHT = 600;
+const MOBILE_OFFSET = 200;
+const PADDING_BOTTOM = '24px';
+const TABLE_HEIGHT_OFFSET = 100;
+
+const defaultPanelStyle = {
+  overflow: 'auto',
+  overflowY: 'auto' as const,
+};
+
 /**
  * Custom Hook to calculate the height of footer panel content when we set the map in fullscreen mode.
  * @param {'legend' | 'default'} footerPanelTab type of footer tab.
  * @returns {UseFooterPanelHeightReturnType} An object of ref objects that are attached to DOM.
  */
 export function useFooterPanelHeight({ footerPanelTab = 'default' }: UseFooterPanelHeightType): UseFooterPanelHeightReturnType {
-  const defaultHeight = 600;
+  // Hooks
   const theme = useTheme();
-  const mapId = useGeoViewMapId();
+  const mobileView = useMediaQuery(theme.breakpoints.down('md'));
+
+  // State
   const leftPanelRef = useRef<HTMLDivElement>(null);
   const rightPanelRef = useRef<HTMLDivElement>(null);
-
   const panelTitleRefHeight = useRef<number>(0);
 
-  const mobileView = useMediaQuery(theme.breakpoints.down('md'));
-
-  // NOTE: this will keep the reference of panel title when tabs are changed.
-  const panelTitleRef = useCallback((node: HTMLDivElement) => {
-    if (node) {
-      panelTitleRefHeight.current = node.getBoundingClientRect()?.height ?? 0;
-    }
-  }, []);
-
+  // Store
+  const mapId = useGeoViewMapId();
   const isMapFullScreen = useAppFullscreenActive();
   const mapSize = useMapSize();
   const footerPanelResizeValue = useUIFooterPanelResizeValue();
   const activeFooterBarTabId = useUIActiveFooterBarTabId();
-  const arrayOfLayerData = useDetailsLayerDataArray();
-  const allFeaturesLayerData = useDataTableAllFeaturesDataArray();
   const { setTableHeight } = useDataTableStoreActions();
   const { tabGroup } = useActiveAppBarTab();
 
-  /**
-   * Set the height of right panel
-   * @param {string} height calculate height of the right panel based on footerPanelTab
-   */
-  const rightPanelHeight = (height?: string): void => {
-    const rightPanel = (rightPanelRef.current?.firstElementChild ?? null) as HTMLElement | null;
-    if (rightPanel) {
-      rightPanel.style.maxHeight = height ?? `${defaultHeight}px`;
-      rightPanel.style.overflowY = 'auto';
-    }
-  };
-
-  useEffect(() => {
-    // Log
-    logger.logTraceUseEffect('USE-FOOTER-PANEL-HEIGHT - footerPanelResizeValue', footerPanelResizeValue, isMapFullScreen);
-
-    if (leftPanelRef.current && isMapFullScreen && (activeFooterBarTabId === footerPanelTab || footerPanelTab === 'default')) {
-      const tabsContainer = document.getElementById(`${mapId}-tabsContainer`)!;
-      const footerBar = tabsContainer?.firstElementChild?.firstElementChild;
+  // Store - Tracking dependencies for data updates
+  const arrayOfLayerData = useDetailsLayerDataArray();
+  const allFeaturesLayerData = useDataTableAllFeaturesDataArray();
 
-      const footerBarHeight = footerBar?.clientHeight ?? 0;
+  // Callbacks
+  // NOTE: this will keep the reference of panel title when tabs are changed.
+  const panelTitleRef = useCallback((node: HTMLDivElement) => {
+    if (node) {
+      panelTitleRefHeight.current = node.getBoundingClientRect()?.height ?? 0;
+    }
+  }, []);
 
-      let leftPanelHeight = (window.screen.height * footerPanelResizeValue) / 100 - panelTitleRefHeight.current - footerBarHeight - 10;
+  const updatePanelHeight = useCallback((panel: HTMLElement, height: string) => {
+    // eslint-disable-next-line no-param-reassign
+    panel.style.maxHeight = height;
+    Object.assign(panel.style, defaultPanelStyle);
+  }, []);
 
-      // update the height of left panel when data table and layers is rendered in appbar and map is in fullscreen.
+  const calculateLeftPanelHeight = useCallback(
+    (footerBarHeight: number): number => {
       if (tabGroup === CV_DEFAULT_APPBAR_CORE.DATA_TABLE || tabGroup === CV_DEFAULT_APPBAR_CORE.LAYERS) {
-        leftPanelHeight = window.screen.height - 200;
+        return window.screen.height - MOBILE_OFFSET;
       }
+      return (window.screen.height * footerPanelResizeValue) / 100 - panelTitleRefHeight.current - footerBarHeight - 10;
+    },
+    [footerPanelResizeValue, tabGroup]
+  );
 
-      leftPanelRef.current.style.maxHeight = `${leftPanelHeight}px`;
-      leftPanelRef.current.style.overflow = 'auto';
-      leftPanelRef.current.style.paddingBottom = '24px';
-
-      if (activeFooterBarTabId === TABS.DATA_TABLE || tabGroup === CV_DEFAULT_APPBAR_CORE.DATA_TABLE) {
-        rightPanelHeight(`${leftPanelHeight}px`);
-        setTableHeight(`${leftPanelHeight - 100}px`);
-      } else if (activeFooterBarTabId === TABS.GEO_CHART && rightPanelRef.current) {
-        const childElem = rightPanelRef.current?.firstElementChild as HTMLElement | null;
-        if (childElem) {
-          childElem.style.maxHeight = `${leftPanelHeight}px`;
-          childElem.style.overflowY = 'auto';
+  useEffect(() => {
+    logger.logTraceUseEffect('USE-FOOTER-PANEL-HEIGHT', footerPanelResizeValue, isMapFullScreen);
+
+    if (!leftPanelRef.current) return;
+
+    const shouldUpdateFullscreen = isMapFullScreen && (activeFooterBarTabId === footerPanelTab || footerPanelTab === 'default');
+
+    if (shouldUpdateFullscreen) {
+      const tabsContainer = document.getElementById(`${mapId}-tabsContainer`);
+      const footerBarHeight = tabsContainer?.firstElementChild?.firstElementChild?.clientHeight ?? 0;
+      const leftPanelHeight = calculateLeftPanelHeight(footerBarHeight);
+
+      updatePanelHeight(leftPanelRef.current, `${leftPanelHeight}px`);
+      leftPanelRef.current.style.paddingBottom = PADDING_BOTTOM;
+
+      // Handle right panel updates
+      const rightPanel = rightPanelRef.current?.firstElementChild as HTMLElement;
+      if (rightPanel) {
+        if (activeFooterBarTabId === TABS.DATA_TABLE || tabGroup === CV_DEFAULT_APPBAR_CORE.DATA_TABLE) {
+          updatePanelHeight(rightPanel, `${leftPanelHeight}px`);
+          setTableHeight(`${leftPanelHeight - TABLE_HEIGHT_OFFSET}px`);
+        } else if (activeFooterBarTabId === TABS.GEO_CHART) {
+          updatePanelHeight(rightPanel, `${leftPanelHeight}px`);
+        } else {
+          updatePanelHeight(rightPanel, `${leftPanelHeight}px`);
         }
-      } else {
-        rightPanelHeight(`${leftPanelHeight}px`);
       }
-    }
-    // reset the footer panel after map is not in fullscreen.
-    if (!isMapFullScreen && leftPanelRef.current) {
-      leftPanelRef.current.style.maxHeight = `${defaultHeight}px`;
-      leftPanelRef.current.style.overflow = 'auto';
-      rightPanelHeight();
-      if (activeFooterBarTabId === TABS.DATA_TABLE || tabGroup === CV_DEFAULT_APPBAR_CORE.DATA_TABLE) {
-        setTableHeight(`${defaultHeight - 100}px`);
-        // check if table exist as child in right panel.
-      } else if (activeFooterBarTabId === TABS.GEO_CHART && rightPanelRef.current) {
-        const childElem = rightPanelRef.current?.firstElementChild as HTMLElement | null;
-        if (childElem) {
-          childElem.style.maxHeight = `${defaultHeight}px`;
-          childElem.style.overflowY = 'auto';
+    } else {
+      // Non-fullscreen updates
+      updatePanelHeight(leftPanelRef.current, `${DEFAULT_HEIGHT}px`);
+
+      const rightPanel = rightPanelRef.current?.firstElementChild as HTMLElement;
+      if (rightPanel) {
+        if (activeFooterBarTabId === TABS.DATA_TABLE || tabGroup === CV_DEFAULT_APPBAR_CORE.DATA_TABLE) {
+          setTableHeight(`${DEFAULT_HEIGHT - TABLE_HEIGHT_OFFSET}px`);
         }
+        updatePanelHeight(rightPanel, `${DEFAULT_HEIGHT}px`);
       }
     }
   }, [
@@ -133,6 +141,8 @@ export function useFooterPanelHeight({ footerPanelTab = 'default' }: UseFooterPa
     arrayOfLayerData,
     allFeaturesLayerData,
     tabGroup,
+    calculateLeftPanelHeight,
+    updatePanelHeight,
   ]);
 
   /**
@@ -140,13 +150,14 @@ export function useFooterPanelHeight({ footerPanelTab = 'default' }: UseFooterPa
    */
   useEffect(() => {
     if (leftPanelRef.current && !isMapFullScreen) {
-      if ((tabGroup === CV_DEFAULT_APPBAR_CORE.DATA_TABLE || tabGroup === CV_DEFAULT_APPBAR_CORE.LAYERS) && mobileView) {
-        leftPanelRef.current.style.maxHeight = `100%`;
-      } else {
-        leftPanelRef.current.style.maxHeight = `${defaultHeight}px`;
-      }
+      const height =
+        (tabGroup === CV_DEFAULT_APPBAR_CORE.DATA_TABLE || tabGroup === CV_DEFAULT_APPBAR_CORE.LAYERS) && mobileView
+          ? '100%'
+          : `${DEFAULT_HEIGHT}px`;
+
+      updatePanelHeight(leftPanelRef.current, height);
     }
-  }, [mapSize, isMapFullScreen, tabGroup, mobileView]);
+  }, [mapSize, isMapFullScreen, tabGroup, mobileView, updatePanelHeight]);
 
   return { leftPanelRef, rightPanelRef, panelTitleRef, activeFooterBarTabId };
 }
diff --git a/packages/geoview-core/src/core/stores/store-interface-and-intial-values/layer-state.ts b/packages/geoview-core/src/core/stores/store-interface-and-intial-values/layer-state.ts
index 3c87c906335..15be2199c97 100644
--- a/packages/geoview-core/src/core/stores/store-interface-and-intial-values/layer-state.ts
+++ b/packages/geoview-core/src/core/stores/store-interface-and-intial-values/layer-state.ts
@@ -382,7 +382,7 @@ export const useIconLayerSet = (layerPath: string): string[] => {
   const layers = useStore(useGeoViewStore(), (state) => state.layerState.legendLayers);
   const layer = LegendEventProcessor.findLayerByPath(layers, layerPath);
   if (layer) {
-    return layer.icons.map((icon) => icon.iconImage).filter((d) => d !== null) as string[];
+    return layer.items.map((item) => item.icon).filter((d) => d !== null) as string[];
   }
   return [];
 };
diff --git a/packages/geoview-core/src/core/utils/useWhatChanged.ts b/packages/geoview-core/src/core/utils/useWhatChanged.ts
index 1ae47a58e67..844367388c7 100644
--- a/packages/geoview-core/src/core/utils/useWhatChanged.ts
+++ b/packages/geoview-core/src/core/utils/useWhatChanged.ts
@@ -200,3 +200,17 @@ export const useWhatChanged = (hookId: string, dependency?: unknown[], dependenc
     };
   }, []);
 };
+
+export const usePerformanceMonitor = (componentName: string): void => {
+  const renderCount = useRef(0);
+  const lastRender = useRef(performance.now());
+
+  useEffect(() => {
+    const now = performance.now();
+    const timeSinceLastRender = now - lastRender.current;
+    renderCount.current++;
+
+    writeConsole(`PERFORMANCE - ${componentName} render #${renderCount.current} took ${timeSinceLastRender.toFixed(2)}ms`);
+    lastRender.current = now;
+  });
+};