Skip to content

search: Add placeholder to fallback query input

Warren Gifford requested to merge fkling/lazy-query-input-improvements into main

Created by: fkling

We are rendering a simple text input until CodeMirror/Monaco are loaded. The current experience with CodeMirror is not ideal because we show an empty input and as soon as CodeMirror loads it shows a placeholder text.

This commit adds logic to show a placeholder text in the plaintext input if CodeMirror is selected. There might still be a noticeable difference between the browser's builtin placeholder color and CodeMirror's placeholder color, but that's still much better than showing no placeholder at all. Note: It's important that the placeholder is not shown when Monaco is selected because Monaco ignores the placeholder value. If we didn't do this we would have the inverse problem with Monaco.

I'm also adding back setting the initial editor value immediately at creation time (instead of also using a transaction to set the initial value). Otherwise a flash of content can happen on the result page when we first load the fallback input (with value), then load CodeMirror (without value) and then set the value (via transaction).

I'm changing the font size for the fallback input to the same one we use for CodeMirror. It already doesn't match the font size for Monaco anyway (I see a noticeable difference in font size in both Firefox and Chrome), so it doesn't make things worse.

Test plan

Refreshed the initial search home page and the search result page both with CodeMirror and Monaco in Firefox and Chrome a couple of times.

Merge request reports

Loading