Codesandbox demo is freezing

[rrjanbiah]

https://codesandbox.io/s/ms-react-is-sh9ud UI performance is too bad that it is difficult to check the checkbox.

[rrjanbiah]

Additional note: https://codesandbox.io/s/ms-is-mese9 (using vanilla JavaScript), the performance is better. But, still the checkbox checking behavior is slightly odd (checked option gets moved to top and the checked status is switching weird).

How to reproduce:

1. Visit https://codesandbox.io/s/ms-is-mese9
2. In the facets, click more than one checkboxes 'fast'

[curquiza]

Hello @rrjanbiah!
Thanks for your feedback! I don't succeed to reproduce your issue on https://codesandbox.io/s/ms-react-is-sh9ud.

Could you try it locally and say if you have the same issue?

$ git clone https://github.com/meilisearch/instant-meilisearch.git
$ cd instant-meilisearch
$ yarn --dev
$ yarn playground:react

Go to the localhost:3000 in your browser.

[rrjanbiah]

@curquiza Please find the attached screen recording:

It explains the 2 issues:

1. Check the responsiveness of checkbox (takes more time to respond)
2. See that "Sports" and "Racing" gets jump. (If you randomly click, it will jump to first too)

FWIW, I have also noted that @searchkit now broke their UI in current GraphQL compliant kit (Now, they too have the lag and jerk). Previously they had something like below (from their blog):

Here's another old @searchkit based UI (to get the idea): ROT13 uggcf://yraq.qrzb.rpebjqshaqe.pbz/ybnaf

[curquiza]

See that "Sports" and "Racing" gets jump. (If you randomly click, it will jump to first too)

Sorry for this inconvenience, this is a currently known issue: meilisearch/meilisearch#943.
But I can do a front fix, what do you think is the best: sorted by alphanumeric order or by number of results?

Check the responsiveness of checkbox (takes more time to respond)

I really don't understand, I don't have the same latency I can see on your gif at this URL when checking/unchecking the boxes: https://sh9ud.csb.app/
@eskombro, @bidoubiwa do you have some?

I also notice the images are broken on Chrome only, I'm going to open an issue.
edit: meilisearch/meilisearch-js-plugins#148

[rrjanbiah]

See that "Sports" and "Racing" gets jump. (If you randomly click, it will jump to first too)

Sorry for this inconvenience, this is a currently known issue: meilisearch/MeiliSearch#943.
But I can do a front fix, what do you think is the best: sorted by alphanumeric order or by number of results?

I think, alphanumeric is better. If sorted by number of results, it will result in jumping

Check the responsiveness of checkbox (takes more time to respond)

I really don't understand, I don't have the same latency I can see on your gif at this URL when checking/unchecking the boxes: https://sh9ud.csb.app/
@eskombro, @bidoubiwa do you have some?

FWIW, my internet speed is 4-5 Mbps. Perhaps you're on a fiber connectivity?

I also notice the images are broken on Chrome only, I'm going to open an issue.
edit: meilisearch/instant-meilisearch#148

Great. Thanks.

[curquiza]

I think, alphanumeric is better. If sorted by number of results, it will result in jumping

👍

FWIW, my internet speed is 4-5 Mbps. Perhaps you're on a fiber connectivity?

Yes mine is on fiber. The latency might be due to the fact you are trying on the code-sandbox demo that is slow (free hosting). That why I asked you to try in local here #5 (comment). What is the result for you?

[rrjanbiah]

FWIW, my internet speed is 4-5 Mbps. Perhaps you're on a fiber connectivity?

Yes mine is on fiber. The latency might be due to the fact you are trying on the code-sandbox demo that is slow (free hosting). That why I asked you to try in local here #5 (comment). What is the result for you?

I don't see much difference. Behavior is almost same.

[bidoubiwa]

Hey! I'm not having this issue:

Also, could you tell me if you have latency using this algolia demo:
https://codesandbox.io/s/github/algolia/doc-code-samples/tree/master/InstantSearch.js/getting-started?file=/src/app.js

If yes, could you provide your browser version?

[rrjanbiah]

Also, could you tell me if you have latency using this algolia demo:
https://codesandbox.io/s/github/algolia/doc-code-samples/tree/master/InstantSearch.js/getting-started?file=/src/app.js

I don't see any lag in this demo. It is fast, but not smooth (will explain below)

If yes, could you provide your browser version?

Google Chrome Version 87.0.4280.66 (Official Build) (64-bit) / on Ubuntu

FWIW, I think, the speed alone may not fix the smoothness. I have closely checked the old @searchkit UI (in ROT13 uggcf://yraq.qrzb.rpebjqshaqe.pbz/ybnaf ) and noted few things:

1. I think, there is a minor animation added using animate.css for every results repaint
2. Facets are sorted by alphanumeric
3. More importantly, facets with 0 results are not removed and so facets positions are not changing (only the result count is changing)

[curquiza]

About points 2 and 3, you can use the transformItems option of React-InstantSearch: https://www.algolia.com/doc/api-reference/widgets/refinement-list/react/#widget-param-transformitems
Here is an example to remove the facets with 0 result:

<RefinementList attribute="genres" transformItems={transformFacets} />

...

function transformFacets(items) {
  return Object.keys(items).reduce((result, key) => {
    if (items[key].count !== 0) {
      result[key] = items[key]
    }
    return result
  }, [])
}

You can do the same to change your facets order.

I said before:

Sorry for this inconvenience, this is a currently known issue: meilisearch/meilisearch#943.
But I can do a front fix, what do you think is the best: sorted by alphanumeric order or by number of results?

This was not really true. There is indeed an issue about facets sorting on MeiliSearch, but the front-end library (React-InstantSearch) is already sorting by the number of matched results, and no matter what MeiliSearch would send. This is the default order chosen by React-InstantSearch. That's why I suggest you use transformItems if you want another order.

About the demo freezing, sorry but I don't know what to do, since I cannot reproduce and any person in my team neither. I let the issue open anyway in case someone has the same issue and can also share his/her feedback.

[rrjanbiah]

@curquiza Thanks a lot. Your insights and patience much appreciated.

[bidoubiwa]

I think this issue is resolved! Tell me if I'm wrong :)