fix(index): prevent render without results (#3932)

* fix(index): prevent render without results

* refactor(InstantSearch): search stalled false by default

* docs: comments wording

Co-Authored-By: François Chalifour <francoischalifour@users.noreply.github.com>

Author: 2 people

src/lib/InstantSearch.js

@@ -127,7 +127,7 @@ See ${createDocumentationLink({
 
     this._stalledSearchDelay = stalledSearchDelay;
     this._searchStalledTimer = null;
-    this._isSearchStalled = true;
+    this._isSearchStalled = false;
     this._searchParameters = {
       ...searchParameters,
       index: indexName,
@@ -370,7 +370,7 @@ See ${createDocumentationLink({
   });
 
   scheduleStalledRender() {
-    if (!this._isSearchStalled && !this._searchStalledTimer) {
+    if (!this._searchStalledTimer) {
       this._searchStalledTimer = setTimeout(() => {
         this._isSearchStalled = true;
         this.scheduleRender();

src/lib/__tests__/InstantSearch-test.js

@@ -969,25 +969,6 @@ describe('scheduleStalledRender', () => {
       })
     );
   });
-
-  // https://github.com/algolia/instantsearch.js/pull/2623
-  it('does not trigger a re-`render` without results', () => {
-    const { searchClient } = createControlledSearchClient();
-    const search = new InstantSearch({
-      indexName: 'index_name',
-      searchClient,
-    });
-
-    search.start();
-
-    search.addWidget({
-      render: () => {},
-    });
-
-    jest.runOnlyPendingTimers();
-
-    return runAllMicroTasks();
-  });
 });
 
 describe('createURL', () => {

src/widgets/index/__tests__/index-test.ts

@@ -745,6 +745,40 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/index/js/"
         });
       });
     });
+
+    // https://github.com/algolia/instantsearch.js/pull/2623
+    it('does not call `render` without `lastResults`', () => {
+      const instance = index({ indexName: 'index_name' });
+      const instantSearchInstance = createInstantSearch();
+
+      const widgets = [createSearchBox(), createPagination()];
+
+      instance.addWidgets(widgets);
+
+      widgets.forEach(widget => {
+        expect(widget.render).toHaveBeenCalledTimes(0);
+      });
+
+      instance.init(
+        createInitOptions({
+          instantSearchInstance,
+        })
+      );
+
+      widgets.forEach(widget => {
+        expect(widget.render).toHaveBeenCalledTimes(0);
+      });
+
+      instance.render(
+        createRenderOptions({
+          instantSearchInstance,
+        })
+      );
+
+      widgets.forEach(widget => {
+        expect(widget.render).toHaveBeenCalledTimes(0);
+      });
+    });
   });
 
   describe('dispose', () => {

src/widgets/index/index.ts

@@ -238,16 +238,18 @@ const index = (props: IndexProps): Index => {
     render({ instantSearchInstance }) {
       localWidgets.forEach(widget => {
         // At this point, all the variables used below are set. Both `helper`
-        //  and `derivedHelper` has been created at the `init` step. The attribute
-        // `lastResults` is set before the event `result` is emitted. At this stage,
-        // the event has emitted hence the value is already set.
+        // and `derivedHelper` have been created at the `init` step. The attribute
+        // `lastResults` might be `null` though. It's possible that a stalled render
+        // happens before the result e.g with a dynamically added index the request might
+        // be delayed. The render is triggered for the complete tree but some parts do
+        // not have results yet.
 
-        if (widget.render) {
+        if (widget.render && derivedHelper!.lastResults) {
           widget.render({
             helper: helper!,
             instantSearchInstance,
-            results: derivedHelper!.lastResults!,
-            state: derivedHelper!.lastResults!._state,
+            results: derivedHelper!.lastResults,
+            state: derivedHelper!.lastResults._state,
             templatesConfig: instantSearchInstance.templatesConfig,
             createURL: instantSearchInstance._createAbsoluteURL,
             searchMetadata: {