Closed brunoocasali closed 1 year ago
@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.
This is the right place! If it is I will move it. Thanks a lot for the feedback :)
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.
That would be awesome! I'm moving the issue there.
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.
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.
https://user-images.githubusercontent.com/4116980/163203388-6bca56fa-f545-4f42-b3c0-20e3a9d9e839.mov