Docusaurus: Strange flicker on refresh

[maraisr]

If you check the notes over at https://github.com/testing-library/testing-library-docs/issues/661 which sent me here.

The rough idea is that the search boxs' keyboard hint flickers on windows.

[lex111]

Apparently you mean that the control key icon flickers on page load (because it changes depending on used OS).

@francoischalifour could you please suggest any options to avoid this?

[francoischalifour]

Hey—this is due to how SSG and therefore Docusaurus (I believe) works. Let me know if I've misunderstood something.

Since a Docusaurus website gets generated on a server, we don't know yet what the user's OS will be, and therefore what shortcuts to display. We need to wait to load the page to have this information.

Hence, we change this shortcut in an effect.

Do you see any alternatives to avoid this flickering? (A safer solution would be to not display shortcuts until we know for sure the browser we're using.)

[maraisr]

Yeah i think that would be best—halt all OS specific things till client side. The same would also have been true for dark mode, light mode stuff (https://joshwcomeau.com/gatsby/dark-mode/).

Is this something easily done? I could help with a PR! 🤩

[lex111]

@francoischalifour Yes, you are right, as I understand it is also relevant for Gatsby (preview TypeScript website with applied doc search v3 https://ts-with-algolia-search.vercel.app/ faces the same issue).

Do you see any alternatives to avoid this flickering? (A safer solution would be to not display shortcuts until we know for sure the browser we're using.)

Well, I think this is a good option.

[francoischalifour]

Sounds good!

@maraisr Happy to receive a PR on the next branch to display .DocSearch-Button-Keys only once we get the navigator platform. 🙂

[slorber]

Do you see any alternatives to avoid this flickering? (A safer solution would be to not display shortcuts until we know for sure the browser we're using.)

If there's a finite set of keys, it's could be possible to render all the keys, but only show one of them, thanks to OS-specific CSS?
The critical CSS is blocking so we are sure it's loaded before the input renders.

Not sure how reliable it would be to detect with CSS the OS though...

[slorber]

CSS variables is also an option, for example same as dark mode, we'd inject a --docsearch-action-key variable in styles at js init time, and use it in a ::after { content: var() } ?

(may not work well for docusaurus due to lazy loading the js)

[lex111]

Fixed in #3819.