From ba2083ec59a8d907d456caf14527af67fd37df40 Mon Sep 17 00:00:00 2001
From: ajayadav09 <ajayadav09@gmail.com>
Date: Thu, 28 Nov 2024 18:38:45 +0530
Subject: [PATCH] show elements once the ui has scrolled

---
 src/components/HelpCenter.js      |  9 +++++++--
 src/components/HelpCenterIntro.js | 26 ++++++++++++--------------
 src/components/SearchResults.js   | 15 ++++++++++++---
 3 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/src/components/HelpCenter.js b/src/components/HelpCenter.js
index 7343fa9..dcb44ff 100644
--- a/src/components/HelpCenter.js
+++ b/src/components/HelpCenter.js
@@ -7,6 +7,7 @@ const HelpCenter = ( props ) => {
 	const [ visible, setVisible ] = useState( false );
 	const [ helpEnabled, setHelpEnabled ] = useState( false );
 	const wrapper = useRef();
+	const introRef = useRef();
 
 	const getHelpStatus = async () => {
 		try {
@@ -44,8 +45,12 @@ const HelpCenter = ( props ) => {
 			id="helpcenterResultsWrapper"
 			ref={ wrapper }
 		>
-			<HelpCenterIntro />
-			<SearchResults wrapper={ wrapper } { ...props } />
+			<HelpCenterIntro introRef={ introRef } />
+			<SearchResults
+				wrapper={ wrapper }
+				introRef={ introRef }
+				{ ...props }
+			/>
 		</div>
 	);
 };
diff --git a/src/components/HelpCenterIntro.js b/src/components/HelpCenterIntro.js
index 871a90c..c28b9cf 100644
--- a/src/components/HelpCenterIntro.js
+++ b/src/components/HelpCenterIntro.js
@@ -4,21 +4,11 @@ import { __ } from '@wordpress/i18n';
 import { ReactComponent as AIStars } from '../icons/ai-stars.svg';
 import { useRevealText, LocalStorageUtils } from '../utils';
 
-const HelpCenterIntro = () => {
+const HelpCenterIntro = ( { introRef } ) => {
 	const [ startReveal, setStartReveal ] = useState( false );
 
 	useEffect( () => {
-		// Get the stored results from localStorage using LocalStorageUtils
-		const storedResults = LocalStorageUtils.getResultInfo();
-
-		// Check if the length of the stored results is <= 0
-		if ( storedResults.length <= 0 ) {
-			// If true, enable reveal effect
-			setStartReveal( true );
-		} else {
-			// Always ensure startReveal is set, even if it's false
-			setStartReveal( false );
-		}
+		setStartReveal( LocalStorageUtils.getResultInfo().length <= 0 );
 	}, [] );
 
 	const introText = __(
@@ -26,14 +16,22 @@ const HelpCenterIntro = () => {
 		'wp-module-help-center'
 	);
 
-	// const revealedIntro = useRevealText( introText, 50, startReveal );
 	const { displayedText: revealedIntro } = useRevealText(
 		introText || '',
 		50,
 		startReveal
 	);
 	return (
-		<div className="helpcenter-intro">
+		<div
+			className="helpcenter-intro"
+			ref={ introRef }
+			style={ {
+				visibility:
+					LocalStorageUtils.getResultInfo().length > 0
+						? 'hidden'
+						: 'visible',
+			} }
+		>
 			<div>
 				<AIStars />
 			</div>
diff --git a/src/components/SearchResults.js b/src/components/SearchResults.js
index d5d971e..ecd2707 100644
--- a/src/components/SearchResults.js
+++ b/src/components/SearchResults.js
@@ -9,7 +9,7 @@ import { __ } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';
 import SearchInput from './SearchInput';
 
-const SearchResults = ( { wrapper, refresh, brand } ) => {
+const SearchResults = ( { wrapper, introRef, refresh, brand } ) => {
 	const [ isLoading, setIsLoading ] = useState( false );
 	const [ noResult, setNoResult ] = useState( false );
 	const [ searchInput, setSearchInput ] = useState( '' );
@@ -24,6 +24,7 @@ const SearchResults = ( { wrapper, refresh, brand } ) => {
 	const [ isNewResult, setIsNewResult ] = useState( false );
 	const [ initComplete, setInitComplete ] = useState( false );
 	const suggestionsRef = useRef();
+	const resultsContainer = useRef();
 
 	useEffect( () => {
 		fetchInitialData();
@@ -125,8 +126,12 @@ const SearchResults = ( { wrapper, refresh, brand } ) => {
 		wrapper.current.scrollBy( {
 			top: scrollDistance,
 			left: 0,
-			behavior: 'smooth',
 		} );
+
+		setTimeout( () => {
+			introRef.current.style.visibility = 'visible';
+			resultsContainer.current.style.visibility = 'visible';
+		}, 500 );
 	};
 
 	const getResultMatches = ( query, tokensMatched, fieldsMatched ) => {
@@ -247,7 +252,11 @@ const SearchResults = ( { wrapper, refresh, brand } ) => {
 
 	return (
 		<>
-			<div className="hc-results-container">
+			<div
+				className="hc-results-container"
+				ref={ resultsContainer }
+				style={ { visibility: 'hidden' } }
+			>
 				{ /* Render existing results */ }
 				{ resultContent?.length > 0 &&
 					resultContent.map( ( result, index ) => (