prevent flash jump of experiments by delaying display (#55508)

Author: Ebonsignori

src/events/components/experiments/useShouldShowExperiment.ts

@@ -11,6 +11,7 @@ export function useShouldShowExperiment(experimentKey: ExperimentNames | { key:
   }
 
   const [showExperiment, setShowExperiment] = useState(false)
+  const [experimentLoading, setExperimentLoading] = useState(true)
   const router = useRouter()
   const mainContext = useMainContext()
   const [isStaff, setIsStaff] = useState<boolean>(false)
@@ -28,6 +29,21 @@ export function useShouldShowExperiment(experimentKey: ExperimentNames | { key:
     }
   }, [])
 
+  useEffect(() => {
+    // After 1.5 seconds, if the experiment logic hasn't resolved, force it to stop loading
+    const timer = setTimeout(() => {
+      if (experimentLoading) {
+        setExperimentLoading(false)
+      }
+    }, 1500)
+    return () => {
+      clearTimeout(timer)
+      if (experimentLoading) {
+        setExperimentLoading(false)
+      }
+    }
+  }, [experimentLoading])
+
   useEffect(() => {
     const updateShouldShow = async () => {
       const isStaff = await getIsStaff()
@@ -40,6 +56,7 @@ export function useShouldShowExperiment(experimentKey: ExperimentNames | { key:
           router.query,
         ),
       )
+      setExperimentLoading(false)
     }
 
     updateShouldShow()
@@ -52,5 +69,8 @@ export function useShouldShowExperiment(experimentKey: ExperimentNames | { key:
     }
   }, [experimentKey, router.locale, mainContext.currentVersion, router.query, isStaff])
 
-  return showExperiment
+  return {
+    showExperiment,
+    experimentLoading,
+  }
 }

src/frame/components/page-header/Header.tsx

@@ -53,7 +53,8 @@ export const Header = () => {
   const searchButtonRef = useRef<HTMLButtonElement>(null)
   const { initializeCTA } = useCTAPopoverContext()
 
-  const showNewSearch = useShouldShowExperiment(EXPERIMENTS.ai_search_experiment)
+  const { showExperiment: showNewSearch, experimentLoading: newSearchLoading } =
+    useShouldShowExperiment(EXPERIMENTS.ai_search_experiment)
   let SearchButton: JSX.Element | null = (
     <SearchBarButton
       isSearchOpen={isSearchOpen}
@@ -189,10 +190,10 @@ export const Header = () => {
             <div className="hide-sm border-left pl-3 d-flex flex-items-center">
               <VersionPicker />
               {/* In larger viewports, we want to show the search bar next to the version picker */}
-              <div className={styles.displayOverLarge}>{SearchButton}</div>
+              {!newSearchLoading && <div className={styles.displayOverLarge}>{SearchButton}</div>}
             </div>
           </div>
-          {showNewSearch ? (
+          {newSearchLoading ? null : showNewSearch ? (
             <HeaderSearchAndWidgets
               isSearchOpen={isSearchOpen}
               SearchButton={SearchButton}