Scroll Performance handling util

[kotAPI]

We need a common util component that does scroll event handling with a throttle?

Let's try to figure out how we can do it natively by not using a library like lodash

          _:hammer_and_wrench: Refactor suggestion_

Optimize scroll event handling

The current implementation attaches a non-throttled scroll listener to the window, which could impact performance. Consider:

1. Adding throttling to the scroll handler
2. Using a more specific scroll container if possible

+import { throttle } from 'lodash';
+
 useEffect(() => {
-    const handleScroll = () => closeWithoutDelay();
+    const handleScroll = throttle(() => closeWithoutDelay(), 100);
     window.addEventListener('scroll', handleScroll);
 
     return () => {
         window.removeEventListener('scroll', handleScroll);
+        handleScroll.cancel();
     };
 }, [closeWithoutDelay]);

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

    import { throttle } from 'lodash';

    useEffect(() => {
        const handleScroll = throttle(() => closeWithoutDelay(), 100);
        window.addEventListener('scroll', handleScroll);

        return () => {
            window.removeEventListener('scroll', handleScroll);
            handleScroll.cancel();
        };
    }, [closeWithoutDelay]);

Originally posted by @coderabbitai[bot] in #583 (comment)