From eeea776292c7c0edb86bd9ff30afe3acf890fe7b Mon Sep 17 00:00:00 2001
From: nikec <43032218+niikeec@users.noreply.github.com>
Date: Tue, 5 Mar 2024 19:37:53 +0100
Subject: [PATCH] [ENG-1662] Fix thumb black bars (#2167)

fix resize loop
---
 .../app/$libraryId/Explorer/FilePath/utils.ts | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/interface/app/$libraryId/Explorer/FilePath/utils.ts b/interface/app/$libraryId/Explorer/FilePath/utils.ts
index bafc47c39..d0942ed94 100644
--- a/interface/app/$libraryId/Explorer/FilePath/utils.ts
+++ b/interface/app/$libraryId/Explorer/FilePath/utils.ts
@@ -1,10 +1,28 @@
-import { useMemo, useState, type CSSProperties, type RefObject } from 'react';
+import { useEffect, useMemo, useRef, useState, type CSSProperties, type RefObject } from 'react';
 import { useCallbackToWatchResize } from '~/hooks';
 
+import { useExplorerContext } from '../Context';
+
 export function useSize(ref: RefObject<Element>) {
+	const explorerSettings = useExplorerContext().useSettingsSnapshot();
+
+	const initialized = useRef(false);
+
 	const [size, setSize] = useState({ width: 0, height: 0 });
 
-	useCallbackToWatchResize(({ width, height }) => setSize({ width, height }), [], ref);
+	useEffect(() => {
+		initialized.current = false;
+	}, [explorerSettings.gridItemSize]);
+
+	useCallbackToWatchResize(
+		({ width, height }) => {
+			if (initialized.current) return;
+			setSize({ width, height });
+			initialized.current = true;
+		},
+		[],
+		ref
+	);
 
 	return size;
 }