chore(@clayui/autocomplete): LPD-55597 Revert infinite scrolling trigger

Author: limaagabriel

packages/clay-autocomplete/src/useInfiniteScrolling.tsx

@@ -7,6 +7,7 @@ import {AnnouncerAPI} from '@clayui/core';
 import {CollectionState} from '@clayui/core/src/collection/types';
 import LoadingIndicator from '@clayui/loading-indicator';
 import {sub, useDebounce} from '@clayui/shared';
+import classNames from 'classnames';
 import React, {
 	RefObject,
 	useCallback,
@@ -153,36 +154,39 @@ export function useInfiniteScrolling({
 	const lastTriggerCount = useRef<number | null>(null);
 
 	useEffect(() => {
-		if (active && triggerRef.current && menuRef.current) {
+		if (
+			isInfiniteScrollingEnabled &&
+			active &&
+			triggerRef.current &&
+			menuRef.current
+		) {
 			let timeoutId: NodeJS.Timeout | null = null;
 
-			const observer = new IntersectionObserver(
-				(entries) => {
-					if (timeoutId) {
-						clearTimeout(timeoutId);
+			const onIntersection: IntersectionObserverCallback = (entries) => {
+				if (timeoutId) {
+					clearTimeout(timeoutId);
+				}
+
+				timeoutId = setTimeout(() => {
+					const isIntersecting = entries[0]?.isIntersecting ?? false;
+					const countHasChanged =
+						currentCount !== lastTriggerCount.current;
+
+					if (!isLoading && isIntersecting && countHasChanged) {
+						isTriggerActive.current = true;
+						lastTriggerCount.current = currentCount;
+
+						onLoadMore().finally(() => {
+							isTriggerActive.current = false;
+						});
 					}
+				}, 200);
+			};
 
-					timeoutId = setTimeout(() => {
-						const isIntersecting =
-							entries[0]?.isIntersecting ?? false;
-						const countHasChanged =
-							currentCount !== lastTriggerCount.current;
-
-						if (!isLoading && isIntersecting && countHasChanged) {
-							isTriggerActive.current = true;
-							lastTriggerCount.current = currentCount;
-
-							onLoadMore().finally(() => {
-								isTriggerActive.current = false;
-							});
-						}
-					}, 200);
-				},
-				{
-					root: menuRef.current,
-					threshold: 1.0,
-				}
-			);
+			const observer = new IntersectionObserver(onIntersection, {
+				root: menuRef.current,
+				threshold: 1,
+			});
 
 			observer.observe(triggerRef.current);
 
@@ -196,14 +200,17 @@ export function useInfiniteScrolling({
 		}
 	}, [active, isLoading, onLoadMore]);
 
-	const InfiniteScrollingTrigger = () =>
-		isInfiniteScrollingEnabled ? (
-			<div aria-hidden="true" className="mt-2" ref={triggerRef}>
-				{(isLoadingMore || debouncedIsLoadingMore) && (
-					<LoadingIndicator className="mb-2" size="sm" />
-				)}
-			</div>
-		) : null;
+	const InfiniteScrollingTrigger = () => (
+		<div
+			aria-hidden="true"
+			className={classNames({'mt-2': isInfiniteScrollingEnabled})}
+			ref={triggerRef}
+		>
+			{(isLoadingMore || debouncedIsLoadingMore) && (
+				<LoadingIndicator className="mb-2" size="sm" />
+			)}
+		</div>
+	);
 
 	const lastItem = currentCount > 0 ? collection.getLastItem() : null;
 	const isLastItemActive =