Meilisearch docs glitches on refreshes

Question

Meilisearch docs glitches on refreshes

brunoocasali opened this issue 2 years ago · comments

I think this is a non-intentional behavior, and it would be awesome if we could make it work without this glitch. I believe in slower connections, and the experience is not that good.

Screen.Recording.2022-04-13.at.11.26.46.mov

Bruno Casali · Answer 1 · Wed Apr 13 2022 22:31:51 GMT+0800 (China Standard Time)

@bidoubiwa I don't know if this is the right place for this report, or if I should do that on the documentation repo directly.

cvermand · Answer 2 · Thu Apr 14 2022 19:57:37 GMT+0800 (China Standard Time)

This is the right place! If it is I will move it. Thanks a lot for the feedback :)

Colin Frick · Answer 3 · Mon Oct 03 2022 17:59:14 GMT+0800 (China Standard Time)

This is expected behavior on slower connections. Currently the css in MeiliSearchbox.vue targets the wrapped input field. This means until docs-searchbar.js is loaded and executed, therefor wrapping the search field in the meilisearch-autocomplete span it is not targeted by the css selector.

If the css selector would be changed to directly targeting the field via id, the problem would be mitigated. I'm not sure if this is the right way to go, but I could prepare a PR in the meilisearch/vuepress-plugin-meilisearch repository.

cvermand · Answer 4 · Mon Oct 03 2022 18:31:50 GMT+0800 (China Standard Time)

That would be awesome!
I'm moving the issue there.

Colin Frick · Answer 5 · Mon Oct 03 2022 20:41:57 GMT+0800 (China Standard Time)

I created the PR here #264 and in meilisearch/documentation#1910

Because documentation uses (prefers-color-scheme: dark) the site is already rendered in dark mode, while the search input is in light mode until docs-searchbar.js is initalized, therefor it flashes white.