Freecodecamp: Search style jumps

Created on 15 Oct 2019 · 3Comments · Source: freeCodeCamp/freeCodeCamp

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:

Go to www.freecodecamp.dev (or any page with search)
Reload
See the placeholder text move
Click on the search bar
Type anything
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
SearchFOUC

client bug

Source

ojeytonwilliams

All 3 comments

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

GabCostaSilva on 15 Oct 2019

@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 on 15 Oct 2019

👍1

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.

ojeytonwilliams on 16 Oct 2019

🎉1

Was this page helpful?

0 / 5 - 0 ratings