Suggestion: Search UX improvements

[trm217]

This issue proposes the following changes:

1. Auto focus when opening search.

If the search window is opened as an overlay, the search-input should be auto focused.

2. Add spinner while formats are being loaded.

When the search overlay is opened, it takes sometime to load all available format-categories. As of now this loading process is not visualised with a spinner. Thus a spinner should be added.

3. When opening the search page, the search-icon in the navigation-bar should not be shown

When opening a link that leads directly to the search page, the navigation bar shows the search-icon, which allows the search-overlay to be opened above the search-results page. This makes no sense and should therefore not be possible.

I see two possible solutions:

1. The navigation bar should not show the search icon, while on the search-results page.
2. Remove the search page all together and instead render the magazine front with the search overlay being opened, containing the search results.

[ovbm]

Good ideas generally. one question regarding 2: Why do we even need a query for the format-categories? To me this seems like a pretty superfluous db query. Can't we render this statically or send the required data on pageload - it's just a dozen links, we save very little by only querying this data when the overlay is opened.

[tpreusse]

Re 1: IMO that's just a draw back of the combo search & navi icon. How do we know if search or navi was touched on mobile? We could do it for mouse clicks I guess.

Re 2: There already is a spinner but the placeholder height is not well defined:

Feel free to adapt. The laoder only shows after a delay:

The loader displays the Spinner component if loading takes longer than delay (default 500ms). You can optionally pass an message to be displayed along the Spinner. https://styleguide.republik.ch/components/loader

Re 3: Solution 1 would IMO be ok but quite a bit of effort considering nobody complained?