Show loading icon while search components load
What does this MR do and why?
Follow-up from #1605 (closed)
In a previous MR, we set dimensions on search forms to prevent layout shift, but we can refine this further by including a GitLab UI loading icon, which is visible until the search forms are loaded.
This MR adds loading icons for both Google and Lunr search forms on the homepage and interior content pages.
Screenshots, screen recordings, or links to review app
| Homepage | Interior page |
|---|---|
 |
 |
| Small-width homepage | Small-width interior page |
|---|---|
 |
 |
On a fast connection, this may not be visible at all, but you can emulate a slow connection to test these in your browser dev tools. In Chrome:
(Don't forget to turn off throttling when you're done! It's the worst!)
How to set up and validate locally
Numbered steps to set up and validate the change are strongly suggested.
-
Configure a local GitLab Docs environment: https://gitlab.com/gitlab-org/gitlab-docs/-/blob/main/doc/setup.md. -
Open browser dev tools and throttle your connection (see screenshot above). "Fast 3G" is probably enough for the loader to appear. -
Load the homepage and verify the spinner appears during the page load and is positioned appropriately. -
Load an interior content page and verify the spinner appears during the page load and is positioned appropriately.
Merge request acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this merge request.