docs(two-column-layout-example): add products plugin

[FabienMotte]

This PR adds the products plugin to the Autocomplete two columns layout example.

Main PR: #908

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 9384542:

Sandbox	Source
@algolia/autocomplete-example-github-repositories-custom-plugin	Configuration
@algolia/autocomplete-example-instantsearch	Configuration
algolia/autocomplete	Configuration
@algolia/autocomplete-example-preview-panel-in-modal	Configuration
@algolia/autocomplete-example-react-renderer	Configuration
@algolia/autocomplete-example-starter-algolia	Configuration
@algolia/autocomplete-example-starter	Configuration
@algolia/autocomplete-example-reshape	Configuration
@algolia/autocomplete-example-vue	Configuration

[sarahdayan]

I've noticed a few things in the UI:

• The title "Products" is very discreet. Why not use the header template from the theme?
• When there are less than 3 products, they fill the space, meaning they grow in height too. Couldn't we instead keep them at the same size?
• When images are loading, the space isn't "reserved" so there's layout shift. Also, with the blurhash we likely have three possible states: empty image, blurred image and crisp image instead of going from not loaded to loaded. Do we think it's good UX?
• When resizing the browser (large to narrow) there's a moment when the panel has a weird width (while resizing). It's particularly visible on Firefox. Is this caused by the custom CSS, or was it already there?

[sarahdayan]

Another UI comment: I'm not a big fan of the color and styles for the star rating system, I find the blue a bit too "system" and it overpowers the rest.

Here's a suggestion, wdyt? These are the colors we use for the star rating system on the docs' solutions. I also reduced the descriptive text and used a more muted color.

[FabienMotte]

Thanks for your comments! 🙏

I've noticed a few things in the UI:

• The title "Products" is very discreet. Why not use the header template from the theme?

It should be better like this. I removed the line at the end because the title is using a white background, conflicting with the background color on all products added by the smart preview feature.
I'll see how to handle this specific case in the relevant PR.

• When there are less than 3 products, they fill the space, meaning they grow in height too. Couldn't we instead keep them at the same size?

Indeed, thanks!

• When images are loading, the space isn't "reserved" so there's layout shift. Also, with the blurhash we likely have three possible states: empty image, blurred image and crisp image instead of going from not loaded to loaded. Do we think it's good UX?

When the image wasn't loaded, the body part was taking all the available height, hiding the Blurhash canvas. Now it should work properly. The blur placeholder is not an image, so it should be visible as the same time as the results.
I added a timeout + network throttling to see the states in the below video.

Screen.Recording.2022-03-08.at.18.43.11.mov

• When resizing the browser (large to narrow) there's a moment when the panel has a weird width (while resizing). It's particularly visible on Firefox. Is this caused by the custom CSS, or was it already there?

I think it is due to media queries that update the max-width of the container, I removed them, can you try again?

[FabienMotte]

Another UI comment: I'm not a big fan of the color and styles for the star rating system, I find the blue a bit too "system" and it overpowers the rest.

Here's a suggestion, wdyt? These are the colors we use for the star rating system on the docs' solutions. I also reduced the descriptive text and used a more muted color.

It's looking much better, thank you (and using one less SVG)!

[sarahdayan]

Regarding the blurash placeholder, it will only show once Algolia has responded (not visible in your video). Until then we don't have the hash so we need to display something.

[FabienMotte]

Regarding the blurash placeholder, it will only show once Algolia has responded (not visible in your video). Until then we don't have the hash so we need to display something.

Is it possible that the state you mentioned is displayed at some point?
Items should not be visible until we get the results from Algolia, right?

I added a background color to the blurred div with an opacity animation so even if the hash is undefined, we have a displayed loading state.

[seafoox]

• Can we add a "See all products (x)" as done in the "[Desktop] Multi category results" view in the Ecom UI Design Kit?

• Same for the "See all" displayed next to the articles

• Could we add some debouncing so it reduces this flickering effect, while keeping it on the left items composed of the QuerySuggestions. So this way the end users can better focus on the left part, before focusing on the right part later on.

• Could we work on adding the highlighting on the product hits?