Search style jumps

[ojeytonwilliams]

Describe the bug
When you reload a page two style issues appear.

• The placeholder text moves slightly once the page has fully loaded.
• The search hits are briefly bold

To Reproduce
Steps to reproduce the behavior:

1. Go to www.freecodecamp.dev (or any page with search)
2. Reload
3. See the placeholder text move
4. Click on the search bar
5. Type anything
6. See the result appear briefly as bold, then change to a normal weight

Expected behavior
The page should start with the styles it ends up getting.

Screenshots

[GabCostaSilva]

Hey, I wanna help with it. Where can I find the code for it? (First time contributing)

[ojeytonwilliams]

@GabCostaSilva I'm not 100% sure where the problem is, but the SearchBar, SearchHits and SearchSuggestion components are all involved to some degree. Somehow the SearchSuggestions are not getting the right classes when first rendered I think.

I'm planning to take a closer look myself, tomorrow, but you're welcome to submit a PR/share any insight. As you wish!

[ojeytonwilliams]

It turns out it wasn't anything to do with those components. The problem is that the Lato-300 font doesn't get loaded until it's needed - in this case when the search results appear. That causes a brief flash of Arial and that's the cause of the problem.

I'm going to look into pre-loading the fonts and clear this up.