assets added to the repo

.gitignore

@@ -41,6 +41,5 @@ testem.log
 .DS_Store
 Thumbs.db
 
-src/assets/snippets/**/*
 !src/assets/snippets/.gitkeep
 .nx/cache

package.json

@@ -3,6 +3,7 @@
   "author": "Tomasz Ducin <[email protected]>",
   "private": true,
   "version": "0.0.0",
+  "node": ">=20.9.0",
   "scripts": {
     "ng": "ng",
     "start": "nx serve",

src/app/defer-usecases/use-case-container.ts

@@ -1,15 +1,14 @@
 import {
   ChangeDetectionStrategy,
   Component,
-  inject,
-  signal,
 } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
-import { NavigationEnd, Router, RouterOutlet } from '@angular/router';
-import { filter, switchMap } from 'rxjs';
+import { RouterOutlet } from '@angular/router';
 import { SnippetDialogContent } from '../ui-snippet-dialog-content/ui-snippet-dialog-content';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [RouterOutlet, SnippetDialogContent],
+  host: { class: 'use-case-container' },
   standalone: true,
   template: `
     <router-outlet />
@@ -58,7 +57,6 @@ import { SnippetDialogContent } from '../ui-snippet-dialog-content/ui-snippet-di
       }
     </dialog>
   `,
-  imports: [RouterOutlet, SnippetDialogContent],
   styles: `
     button {
       cursor: pointer;
@@ -120,8 +118,6 @@ import { SnippetDialogContent } from '../ui-snippet-dialog-content/ui-snippet-di
       background: #000;
       opacity: 0.75;
     }
-  `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: { class: 'use-case-container' },
+    `
 })
 export default class UseCaseContainer {}

src/assets/snippets/defer-error/html.html

@@ -0,0 +1,43 @@
+<pre class="shiki light-plus" style="background-color: #FFFFFF" tabindex="0"><code><span class="line"><span style="color: #800000">&lt;app-box&gt;</span></span>
+<span class="line"><span style="color: #000000">  </span><span style="color: #800000">&lt;</span><span style="color: #CD3131">content</span><span style="color: #800000">&gt;</span><span style="color: #000000">📚 The </span><span style="color: #800000">&lt;code&gt;</span><span style="color: #0000FF">&amp;#64;</span><span style="color: #000000">error</span><span style="color: #800000">&lt;/code&gt;</span><span style="color: #000000"> block allows you to declare content that will be shown if deferred loading fails.</span><span style="color: #800000">&lt;/</span><span style="color: #CD3131">content</span><span style="color: #800000">&gt;</span></span>
+<span class="line"><span style="color: #000000">  </span><span style="color: #800000">&lt;</span><span style="color: #CD3131">content</span><span style="color: #800000">&gt;</span><span style="color: #000000">🖐️ first, trigger HTTP request failure within your devtools: </span><span style="color: #800000">&lt;em&gt;</span><span style="color: #000000">Network</span><span style="color: #800000">&lt;/em&gt;</span><span style="color: #000000"> tab -&gt; right-click on one of the dynamic chunks loaded -&gt; </span><span style="color: #800000">&lt;strong&gt;</span><span style="color: #000000">Block request URL/domain</span><span style="color: #800000">&lt;/strong&gt;</span><span style="color: #000000"> -&gt; and now trigger </span><span style="color: #800000">&lt;code&gt;</span><span style="color: #0000FF">&amp;#64;</span><span style="color: #000000">defer</span><span style="color: #800000">&lt;/code&gt;&lt;/</span><span style="color: #CD3131">content</span><span style="color: #800000">&gt;</span></span>
+<span class="line"><span style="color: #000000">  </span><span style="color: #800000">&lt;</span><span style="color: #CD3131">content</span><span style="color: #800000">&gt;</span><span style="color: #000000">🅰️ Currently there&#39;s no built-in </span><span style="color: #800000">&lt;code&gt;</span><span style="color: #000000">retry</span><span style="color: #800000">&lt;/code&gt;</span><span style="color: #000000"> option available. More info in </span><span style="color: #800000">&lt;a</span><span style="color: #000000"> </span><span style="color: #E50000">href</span><span style="color: #000000">=</span><span style="color: #0000FF">&quot;https://github.com/angular/angular/issues/52800&quot;</span><span style="color: #800000">&gt;</span><span style="color: #000000">this GH issue</span><span style="color: #800000">&lt;/a&gt;</span><span style="color: #000000">.</span><span style="color: #800000">&lt;/</span><span style="color: #CD3131">content</span><span style="color: #800000">&gt;</span></span>
+<span class="line"><span style="color: #800000">&lt;/app-box&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color: #795E26">@defer </span><span style="color: #000000">(</span><span style="color: #0000FF">on</span><span style="color: #000000"> interaction) {</span></span>
+<span class="line"><span style="color: #000000">  </span><span style="color: #800000">&lt;lazy-error&gt;</span></span>
+<span class="line"><span style="color: #000000">    </span><span style="color: #800000">&lt;article&gt;</span></span>
+<span class="line"><span style="color: #000000">      some </span><span style="color: #800000">&lt;code&gt;</span><span style="color: #0000FF">&amp;#64;</span><span style="color: #000000">defer (on idle)</span><span style="color: #800000">&lt;/code&gt;</span><span style="color: #000000"> content</span></span>
+<span class="line"><span style="color: #000000">    </span><span style="color: #800000">&lt;/article&gt;</span></span>
+<span class="line"><span style="color: #000000">  </span><span style="color: #800000">&lt;/lazy-error&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color: #000000">} </span><span style="color: #795E26">@placeholder </span><span style="color: #000000">(minimum </span><span style="color: #098658">500</span><span style="color: #000000">ms) {</span></span>
+<span class="line"><span style="color: #000000">  </span><span style="color: #800000">&lt;app-button&gt;</span><span style="color: #000000">👉 </span><span style="color: #800000">&lt;strong&gt;</span><span style="color: #000000">interact with me</span><span style="color: #800000">&lt;/strong&gt;</span><span style="color: #000000"> 👈</span><span style="color: #800000">&lt;/app-button&gt;</span></span>
+<span class="line"><span style="color: #000000">} </span><span style="color: #795E26">@loading </span><span style="color: #000000">(after </span><span style="color: #098658">100</span><span style="color: #000000">ms; minimum </span><span style="color: #098658">1</span><span style="color: #000000">s) {</span></span>
+<span class="line"><span style="color: #000000">  </span><span style="color: #800000">&lt;</span><span style="color: #CD3131">loader</span><span style="color: #800000"> /&gt;</span></span>
+<span class="line"><span style="color: #000000">} </span><span style="color: #0000FF">@error</span><span style="color: #000000"> {</span></span>
+<span class="line"><span style="color: #000000">  something went wrong! 😭</span></span>
+<span class="line"><span style="color: #000000">}</span></span>
+<span class="line"></span></code></pre>
+
+<pre class="shiki dark-plus" style="background-color: #1E1E1E" tabindex="0"><code><span class="line"><span style="color: #808080">&lt;</span><span style="color: #569CD6">app-box</span><span style="color: #808080">&gt;</span></span>
+<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #808080">&lt;</span><span style="color: #F44747">content</span><span style="color: #808080">&gt;</span><span style="color: #D4D4D4">📚 The </span><span style="color: #808080">&lt;</span><span style="color: #569CD6">code</span><span style="color: #808080">&gt;</span><span style="color: #569CD6">&amp;#64;</span><span style="color: #D4D4D4">error</span><span style="color: #808080">&lt;/</span><span style="color: #569CD6">code</span><span style="color: #808080">&gt;</span><span style="color: #D4D4D4"> block allows you to declare content that will be shown if deferred loading fails.</span><span style="color: #808080">&lt;/</span><span style="color: #F44747">content</span><span style="color: #808080">&gt;</span></span>
+<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #808080">&lt;</span><span style="color: #F44747">content</span><span style="color: #808080">&gt;</span><span style="color: #D4D4D4">🖐️ first, trigger HTTP request failure within your devtools: </span><span style="color: #808080">&lt;</span><span style="color: #569CD6">em</span><span style="color: #808080">&gt;</span><span style="color: #D4D4D4">Network</span><span style="color: #808080">&lt;/</span><span style="color: #569CD6">em</span><span style="color: #808080">&gt;</span><span style="color: #D4D4D4"> tab -&gt; right-click on one of the dynamic chunks loaded -&gt; </span><span style="color: #808080">&lt;</span><span style="color: #569CD6">strong</span><span style="color: #808080">&gt;</span><span style="color: #D4D4D4">Block request URL/domain</span><span style="color: #808080">&lt;/</span><span style="color: #569CD6">strong</span><span style="color: #808080">&gt;</span><span style="color: #D4D4D4"> -&gt; and now trigger </span><span style="color: #808080">&lt;</span><span style="color: #569CD6">code</span><span style="color: #808080">&gt;</span><span style="color: #569CD6">&amp;#64;</span><span style="color: #D4D4D4">defer</span><span style="color: #808080">&lt;/</span><span style="color: #569CD6">code</span><span style="color: #808080">&gt;&lt;/</span><span style="color: #F44747">content</span><span style="color: #808080">&gt;</span></span>
+<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #808080">&lt;</span><span style="color: #F44747">content</span><span style="color: #808080">&gt;</span><span style="color: #D4D4D4">🅰️ Currently there&#39;s no built-in </span><span style="color: #808080">&lt;</span><span style="color: #569CD6">code</span><span style="color: #808080">&gt;</span><span style="color: #D4D4D4">retry</span><span style="color: #808080">&lt;/</span><span style="color: #569CD6">code</span><span style="color: #808080">&gt;</span><span style="color: #D4D4D4"> option available. More info in </span><span style="color: #808080">&lt;</span><span style="color: #569CD6">a</span><span style="color: #D4D4D4"> </span><span style="color: #9CDCFE">href</span><span style="color: #D4D4D4">=</span><span style="color: #CE9178">&quot;https://github.com/angular/angular/issues/52800&quot;</span><span style="color: #808080">&gt;</span><span style="color: #D4D4D4">this GH issue</span><span style="color: #808080">&lt;/</span><span style="color: #569CD6">a</span><span style="color: #808080">&gt;</span><span style="color: #D4D4D4">.</span><span style="color: #808080">&lt;/</span><span style="color: #F44747">content</span><span style="color: #808080">&gt;</span></span>
+<span class="line"><span style="color: #808080">&lt;/</span><span style="color: #569CD6">app-box</span><span style="color: #808080">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color: #DCDCAA">@defer </span><span style="color: #D4D4D4">(</span><span style="color: #569CD6">on</span><span style="color: #D4D4D4"> interaction) {</span></span>
+<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #808080">&lt;</span><span style="color: #569CD6">lazy-error</span><span style="color: #808080">&gt;</span></span>
+<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #808080">&lt;</span><span style="color: #569CD6">article</span><span style="color: #808080">&gt;</span></span>
+<span class="line"><span style="color: #D4D4D4">      some </span><span style="color: #808080">&lt;</span><span style="color: #569CD6">code</span><span style="color: #808080">&gt;</span><span style="color: #569CD6">&amp;#64;</span><span style="color: #D4D4D4">defer (on idle)</span><span style="color: #808080">&lt;/</span><span style="color: #569CD6">code</span><span style="color: #808080">&gt;</span><span style="color: #D4D4D4"> content</span></span>
+<span class="line"><span style="color: #D4D4D4">    </span><span style="color: #808080">&lt;/</span><span style="color: #569CD6">article</span><span style="color: #808080">&gt;</span></span>
+<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #808080">&lt;/</span><span style="color: #569CD6">lazy-error</span><span style="color: #808080">&gt;</span></span>
+<span class="line"></span>
+<span class="line"><span style="color: #D4D4D4">} </span><span style="color: #DCDCAA">@placeholder </span><span style="color: #D4D4D4">(minimum </span><span style="color: #B5CEA8">500</span><span style="color: #D4D4D4">ms) {</span></span>
+<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #808080">&lt;</span><span style="color: #569CD6">app-button</span><span style="color: #808080">&gt;</span><span style="color: #D4D4D4">👉 </span><span style="color: #808080">&lt;</span><span style="color: #569CD6">strong</span><span style="color: #808080">&gt;</span><span style="color: #D4D4D4">interact with me</span><span style="color: #808080">&lt;/</span><span style="color: #569CD6">strong</span><span style="color: #808080">&gt;</span><span style="color: #D4D4D4"> 👈</span><span style="color: #808080">&lt;/</span><span style="color: #569CD6">app-button</span><span style="color: #808080">&gt;</span></span>
+<span class="line"><span style="color: #D4D4D4">} </span><span style="color: #DCDCAA">@loading </span><span style="color: #D4D4D4">(after </span><span style="color: #B5CEA8">100</span><span style="color: #D4D4D4">ms; minimum </span><span style="color: #B5CEA8">1</span><span style="color: #D4D4D4">s) {</span></span>
+<span class="line"><span style="color: #D4D4D4">  </span><span style="color: #808080">&lt;</span><span style="color: #F44747">loader</span><span style="color: #808080"> /&gt;</span></span>
+<span class="line"><span style="color: #D4D4D4">} </span><span style="color: #569CD6">@error</span><span style="color: #D4D4D4"> {</span></span>
+<span class="line"><span style="color: #D4D4D4">  something went wrong! 😭</span></span>
+<span class="line"><span style="color: #D4D4D4">}</span></span>
+<span class="line"></span></code></pre>