algolia / instantsearch

⚑️ Libraries for building performant and instant search and recommend experiences with Algolia. Compatible with JavaScript, TypeScript, React and Vue.

Home Page:https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/js/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Infinite query loading with React 18 Suspense and Reconciliation

AntoineDuComptoirDesPharmacies opened this issue Β· comments

πŸ› Current behavior

On a SPA where 'pageA' contains InstantSearch node, pageB is slow to load in lazy loading with Suspense.
If user switch fast from pageA to pageB and then go back to pageA before pageB loading ended, InstantSearch state became broken with an infinite loading.

It may be linked to :

  • React do not dismount/remount InstantSearch node as DOM reconciliation indicate that there is no change
  • Query response arrived while Suspense was in progress and so was not processed by InstantSearch node

πŸ” Steps to reproduce

  1. Go to codesandbox in Chrome Slow 3G mode
  2. Once red square disappear and you start reading "loading", click immediately on pageB link
  3. When red square appear to go to pageB, immediately click on pageA link
  4. You arrive on pageA with infinite loading

Live reproduction

https://codesandbox.io/s/goofy-goldwasser-ixfg0z?file=/src/App.js

πŸ’­ Expected behavior

Either the query should be relaunched when arriving on pageA or loading should end with results from query.

Package version

react-instantsearch-dom: 6.32.0

Operating system

Windows 10

Browser

Chrome 110

Code of Conduct

  • I agree to follow this project's Code of Conduct