fixup! fixup! refactor(core): add batching for defer blocks with `on …

…idle` conditions
AndrewKushnir · Sep 25, 2023 · 8d0fa51 · 8d0fa51
1 parent f5d5147
commit 8d0fa51
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 7 deletions.
diff --git a/packages/core/src/render3/instructions/defer.ts b/packages/core/src/render3/instructions/defer.ts
@@ -114,13 +114,16 @@ export function ɵɵdeferWhen(rawValue: unknown) {
     const tNode = getSelectedTNode();
     const lDetails = getLDeferBlockDetails(lView, tNode);
     const renderedState = lDetails[DEFER_BLOCK_STATE];
+    console.log('Entering ɵɵdeferWhen with values: ', value, ' and ', renderedState);
     if (value === false && renderedState === DeferBlockInternalState.Initial) {
       // If nothing is rendered yet, render a placeholder (if defined).
+      console.log('Rendering placeholder');
       renderPlaceholder(lView, tNode);
     } else if (
         value === true &&
         (renderedState === DeferBlockInternalState.Initial ||
          renderedState === DeferBlockState.Placeholder)) {
+      console.log('Triggering defer block');
       // The `when` condition has changed to `true`, trigger defer block loading
       // if the block is either in initial (nothing is rendered) or a placeholder
       // state.

diff --git a/packages/core/test/acceptance/defer_spec.ts b/packages/core/test/acceptance/defer_spec.ts
@@ -36,7 +36,11 @@ function clearDirectiveDefs(type: Type<unknown>): void {
  */
 function dynamicImportOf<T>(type: T, timeout = 0): Promise<T> {
   return new Promise<T>(resolve => {
-    setTimeout(() => resolve(type), timeout);
+    console.log(`Scheduling ${timeout === 0 ? 'main import' : 'await all pending imports'}.`);
+    setTimeout(() => {
+      console.log(`Resolving ${timeout === 0 ? 'main import' : 'await all pending imports'}.`);
+      return resolve(type);
+    }, timeout);
   });
 }
 
@@ -54,7 +58,7 @@ function failedDynamicImport(): Promise<void> {
  * emulated using `dynamicImportOf` function.
  */
 function allPendingDynamicImports() {
-  return dynamicImportOf(null, 10);
+  return dynamicImportOf(null, 100);
 }
 
 // Set `PLATFORM_ID` to a browser platform value to trigger defer loading
@@ -66,8 +70,10 @@ describe('#defer', () => {
   afterEach(() => setEnabledBlockTypes([]));
 
   beforeEach(() => {
-    TestBed.configureTestingModule(
-        {providers: COMMON_PROVIDERS, deferBlockBehavior: DeferBlockBehavior.Playthrough});
+    TestBed.configureTestingModule({
+      providers: COMMON_PROVIDERS,
+      deferBlockBehavior: DeferBlockBehavior.Playthrough,
+    });
   });
 
   it('should transition between placeholder, loading and loaded states', async () => {
@@ -899,7 +905,7 @@ describe('#defer', () => {
       expect(fixture.nativeElement.outerHTML).toContain('Rendering primary block');
     });
 
-    it('should support `prefetch on idle` condition', async () => {
+    it('should support `prefetch on idle` condition #2', async () => {
       @Component({
         selector: 'nested-cmp',
         standalone: true,
@@ -916,6 +922,8 @@ describe('#defer', () => {
         template: `
           {#defer when deferCond; prefetch on idle}
             <nested-cmp [block]="'primary'" />
+          {:loading}
+            Loading
           {:placeholder}
             Placeholder
           {/defer}
@@ -979,7 +987,7 @@ describe('#defer', () => {
       expect(loadingFnInvokedTimes).toBe(1);
     });
 
-    it('should trigger prefetching based on `on idle` only once', async () => {
+    it('should trigger prefetching based on `on idle` only once #2', async () => {
       @Component({
         selector: 'nested-cmp',
         standalone: true,
@@ -997,6 +1005,8 @@ describe('#defer', () => {
           {#for item of items; track item}
             {#defer when deferCond; prefetch on idle}
               <nested-cmp [block]="'primary for \`' + item + '\`'" />
+            {:loading}
+              Loading \`{{ item }}\`
             {:placeholder}
               Placeholder \`{{ item }}\`
             {/defer}
@@ -1063,7 +1073,7 @@ describe('#defer', () => {
       expect(loadingFnInvokedTimes).toBe(1);
     });
 
-    it('should trigger fetching based on `on idle` only once', async () => {
+    it('should trigger fetching based on `on idle` only once #2', async () => {
       @Component({
         selector: 'nested-cmp',
         standalone: true,