Use stable array/object constants

src/base/components/SpinnerImage.tsx

@@ -8,6 +8,7 @@
 
 import type { Ref } from 'react';
 import { useState, useEffect, useCallback, useRef } from 'react';
+import { STABLE_EMPTY_OBJECT } from '@/base/Base.constants.ts';
 import CircularProgress from '@mui/material/CircularProgress';
 import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
@@ -61,7 +62,7 @@ export const SpinnerImage = ({ ref, ...props }: SpinnerImageProps) => {
         alt,
         onLoad,
         onError,
-        spinnerStyle: { small, ...spinnerStyle } = {},
+        spinnerStyle: { small, ...spinnerStyle } = STABLE_EMPTY_OBJECT,
         imgStyle,
         hideImgStyle,
         priority,

src/base/components/feedback/Progress.tsx

@@ -10,11 +10,12 @@ import Box from '@mui/material/Box';
 import type { CircularProgressProps } from '@mui/material/CircularProgress';
 import CircularProgress from '@mui/material/CircularProgress';
 import Typography from '@mui/material/Typography';
+import { STABLE_EMPTY_OBJECT } from '@/base/Base.constants.ts';
 
 export const Progress = ({
     progress,
     showText = true,
-    progressProps = {},
+    progressProps = STABLE_EMPTY_OBJECT,
 }: {
     progress: number;
     showText?: boolean;

src/base/components/menu/NestedMenuItem.tsx

@@ -12,6 +12,7 @@
  * with a few changes to fix a bug on mobile devices where opening the sub menu immediately triggered the on click of the underlying menu item
  */
 
+import { STABLE_EMPTY_OBJECT } from '@/base/Base.constants.ts';
 import type { MenuProps as MuiMenuProps } from '@mui/material/Menu';
 import Menu from '@mui/material/Menu';
 import type { MenuItemProps as MuiMenuItemProps } from '@mui/material/MenuItem';
@@ -64,7 +65,7 @@ export const NestedMenuItem = ({ ref, ...props }: NestedMenuItemProps) => {
         children,
         className,
         tabIndex: tabIndexProp,
-        ContainerProps: ContainerPropsProp = {},
+        ContainerProps: ContainerPropsProp = STABLE_EMPTY_OBJECT,
         MenuProps,
         ...MenuItemProps
     } = props;

src/base/hooks/useIntersectionObserver.tsx

@@ -8,6 +8,7 @@
 
 import type { RefObject } from 'react';
 import { useLayoutEffect, useState } from 'react';
+import { STABLE_EMPTY_OBJECT } from '@/base/Base.constants.ts';
 
 export const useIntersectionObserver = (
     ref: RefObject<HTMLElement | null> | HTMLElement | undefined | null,
@@ -17,7 +18,7 @@ export const useIntersectionObserver = (
         root,
         rootMargin,
         threshold,
-    }: IntersectionObserverInit & { ignoreInitialObserve?: boolean } = {},
+    }: IntersectionObserverInit & { ignoreInitialObserve?: boolean } = STABLE_EMPTY_OBJECT,
 ): (() => void) => {
     const [disconnect, setDisconnect] = useState<() => void>(() => {});