search

meilisearch / vuepress-plugin-meilisearch

Add a relevant and typo tolerant search bar to your VuePress
MIT License
63 stars 14 forks source link

Meilisearch docs glitches on refreshes #263

Closed brunoocasali closed 1 year ago

brunoocasali commented 2 years ago

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

brunoocasali commented 2 years 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.

bidoubiwa commented 2 years ago

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

ColinFrick commented 1 year ago

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.

bidoubiwa commented 1 year ago

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

ColinFrick commented 1 year ago

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.