IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2026-08-09 12:38:21 -05:00
Code Issues Packages Projects Releases Wiki Activity

UX: Prevent header search flash when welcome banner is visible (#36834)

Browse Source 
The IntersectionObserver callback is asynchronous, which means
`welcomeBannerSearchInViewport` remains `false` for a brief moment after
the welcome banner renders. This causes the header search to flash
briefly before being hidden.

Add a synchronous viewport check using `isElementInViewport()`
immediately after setting up the observer. This sets the correct initial
state before the first async callback fires.

Ref - t/171300
This commit is contained in:
Régis Hanol
2025-12-22 18:09:38 +01:00
committed by GitHub
parent 808ced37c0
commit 6a11ded0c8
1 changed files with 5 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/discourse/app/components/welcome-banner.gjs
+5
View File
@@ -8,6 +8,7 @@ import PluginOutlet from "discourse/components/plugin-outlet";
import SearchMenu from "discourse/components/search-menu";
import bodyClass from "discourse/helpers/body-class";
import concatClass from "discourse/helpers/concat-class";
import isElementInViewport from "discourse/lib/is-element-in-viewport";
import { prioritizeNameFallback } from "discourse/lib/settings";
import { sanitize } from "discourse/lib/text";
import { defaultHomepage, escapeExpression } from "discourse/lib/utilities";
@@ -42,6 +43,10 @@ export default class WelcomeBanner extends Component {
observer.observe(element);
// Synchronously check if the element is in the viewport on initial setup
// to avoid a flash of the header search before the async IntersectionObserver callback fires
this.search.welcomeBannerSearchInViewport = isElementInViewport(element);
return () => {
observer.disconnect();
this.search.welcomeBannerSearchInViewport = false;