feat(dynamicWidgets): prevent calling of "render" when widgets are not yet added

packages/instantsearch.js/src/connectors/dynamic-widgets/__tests__/connectDynamicWidgets-test.ts

@@ -723,6 +723,7 @@ describe('connectDynamicWidgets', () => {
       expect(
         dynamicWidgets.getRenderState(existingRenderState, createInitOptions())
       ).toEqual({
+        PREVENT_RENDER: true,
         dynamicWidgets: {
           attributesToRender: [],
           widgetParams,
@@ -750,6 +751,7 @@ describe('connectDynamicWidgets', () => {
           createRenderOptions()
         )
       ).toEqual({
+        PREVENT_RENDER: true,
         dynamicWidgets: {
           attributesToRender: ['test1'],
           widgetParams,

packages/instantsearch.js/src/connectors/dynamic-widgets/connectDynamicWidgets.ts

@@ -212,10 +212,22 @@ const connectDynamicWidgets: DynamicWidgetsConnector =
             })
           );
         },
+        rendersOnPrevented: true,
         getRenderState(renderState, renderOptions) {
+          const { PREVENT_RENDER = true } = renderState;
+          const dynamicWidgets = this.getWidgetRenderState(renderOptions);
+
+          // if we are in a "has results, but only just mounted widgets" state, add a flag
+          // in other cases the flag isn't set and we *do* render the other widgets
+          // TODO: improve this condition, reordering is allowed, we just want to make sure it's the same items
+          const willChangeWidgets =
+            renderState.dynamicWidgets?.attributesToRender.join('__') !==
+            dynamicWidgets?.attributesToRender.join('__');
+
           return {
             ...renderState,
-            dynamicWidgets: this.getWidgetRenderState(renderOptions),
+            PREVENT_RENDER: PREVENT_RENDER !== false && willChangeWidgets,
+            dynamicWidgets,
           };
         },
         getWidgetRenderState({ results, state }) {

packages/instantsearch.js/src/types/render-state.ts

@@ -55,8 +55,10 @@ type ConnectorRenderStates = AnswersWidgetDescription['indexRenderState'] &
 type WidgetRenderStates = AnalyticsWidgetDescription['indexRenderState'] &
   PlacesWidgetDescription['indexRenderState'];
 
+type GlobalRenderStates = { PREVENT_RENDER: boolean };
+
 export type IndexRenderState = Partial<
-  ConnectorRenderStates & WidgetRenderStates
+  ConnectorRenderStates & WidgetRenderStates & GlobalRenderStates
 >;
 
 export type RenderState = {

packages/instantsearch.js/src/types/widget.ts

@@ -247,6 +247,12 @@ type RequiredRenderStateLifeCycle<
     >,
     renderOptions: InitOptions | RenderOptions
   ) => IndexRenderState & TWidgetDescription['indexRenderState'];
+
+  /**
+   * If PREVENT_RENDER is set in the render state, still render this widget.
+   * This is only useful for cases where this widget is the one setting PREVENT_RENDER
+   */
+  rendersOnPrevented?: boolean;
 };
 
 type RenderStateLifeCycle<

packages/instantsearch.js/src/widgets/index/index.ts

@@ -644,6 +644,12 @@ const index = (widgetParams: IndexWidgetParams): IndexWidget => {
         }
       });
 
+      // a widget that causes the current state to be incomplete (dynamic widgets)
+      // can prevent following widgets from rendering this pass by setting the
+      // PREVENT_RENDER flag to "true"
+      const { PREVENT_RENDER = false } =
+        instantSearchInstance.renderState?.[this.getIndexId()] ?? {};
+
       widgetsToRender.forEach((widget) => {
         // At this point, all the variables used below are set. Both `helper`
         // and `derivedHelper` have been created at the `init` step. The attribute
@@ -652,7 +658,8 @@ const index = (widgetParams: IndexWidgetParams): IndexWidget => {
         // be delayed. The render is triggered for the complete tree but some parts do
         // not have results yet.
 
-        if (widget.render) {
+        // the widget can make itself rendering, even if the rest is prevented
+        if (widget.render && (!PREVENT_RENDER || widget.rendersOnPrevented)) {
           widget.render(createRenderArgs(instantSearchInstance, this));
         }
       });