Merge pull request #3013 from opossum-tool/fix/hidden-search-symobol

fix: don't hide search icon on first render

Author: mariusAsaTNG

src/Frontend/Components/ResizePanels/ResizePanels.tsx

@@ -4,7 +4,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import SearchIcon from '@mui/icons-material/Search';
 import { Resizable } from 're-resizable';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 
 import { AllowedFrontendChannels } from '../../../shared/ipc-channels';
 import { TRANSITION } from '../../shared-styles';
@@ -71,27 +71,35 @@ export const ResizePanels: React.FC<ResizePanelsProps> = ({
   const effectiveHeight = height ?? 0;
   const fraction = FRACTIONS[main];
   const [isResizing, setIsResizing] = useState(true);
+  const [containerHeight, setContainerHeight] = useState<number | undefined>(
+    undefined,
+  );
   const containerRef = useRef<Resizable>(null);
   const upperSearchRef = useRef<HTMLInputElement>(null);
   const lowerSearchRef = useRef<HTMLInputElement>(null);
 
   const isLowerCollapsed = effectiveHeight <= HEADER_HEIGHT;
   const isUpperCollapsed =
-    effectiveHeight >=
-    (containerRef.current?.size.height ?? 0) - HEADER_HEIGHT - 1;
+    containerHeight !== undefined &&
+    effectiveHeight >= containerHeight - HEADER_HEIGHT - 1;
+
+  useLayoutEffect(() => {
+    if (containerRef.current) {
+      setContainerHeight(containerRef.current.size.height);
+    }
+  }, [containerRef.current?.size.height]);
 
   useEffect(() => {
     const applyGoldenRatio = () =>
-      containerRef.current &&
-      setHeight(containerRef.current.size.height / fraction);
+      containerHeight !== undefined && setHeight(containerHeight / fraction);
 
     heightIsNull && applyGoldenRatio();
     window.addEventListener('resize', applyGoldenRatio);
 
     return () => {
       window.removeEventListener('resize', applyGoldenRatio);
     };
-  }, [fraction, heightIsNull, setHeight]);
+  }, [fraction, heightIsNull, setHeight, containerHeight]);
 
   useIpcRenderer(
     upperPanel.search.channel,
@@ -166,9 +174,7 @@ export const ResizePanels: React.FC<ResizePanelsProps> = ({
         size={{ height: height || '50%', width: 'auto' }}
         minHeight={HEADER_HEIGHT}
         maxHeight={
-          containerRef.current
-            ? containerRef.current.size.height - HEADER_HEIGHT
-            : undefined
+          containerHeight ? containerHeight - HEADER_HEIGHT : undefined
         }
         onResizeStart={() => setIsResizing(true)}
         onResizeStop={(_event, _direction, _ref, delta) => {
@@ -256,10 +262,10 @@ export const ResizePanels: React.FC<ResizePanelsProps> = ({
         disabled={isLowerCollapsed}
         onClick={() => {
           setIsResizing(true);
-          if (containerRef.current) {
-            effectiveHeight <= containerRef.current.size.height / fraction
+          if (containerHeight !== undefined) {
+            effectiveHeight <= containerHeight / fraction
               ? setHeight(HEADER_HEIGHT)
-              : setHeight(containerRef.current.size.height / fraction);
+              : setHeight(containerHeight / fraction);
           }
           setIsResizing(false);
         }}
@@ -274,10 +280,10 @@ export const ResizePanels: React.FC<ResizePanelsProps> = ({
         disabled={isUpperCollapsed}
         onClick={() => {
           setIsResizing(true);
-          if (containerRef.current) {
-            effectiveHeight < containerRef.current.size.height / fraction
-              ? setHeight(containerRef.current.size.height / fraction)
-              : setHeight(containerRef.current.size.height - HEADER_HEIGHT);
+          if (containerHeight !== undefined) {
+            effectiveHeight < containerHeight / fraction
+              ? setHeight(containerHeight / fraction)
+              : setHeight(containerHeight - HEADER_HEIGHT);
           }
           setIsResizing(false);
         }}