more examples

ducin · Dec 18, 2023 · 700f26c · 700f26c
1 parent 7721d2e
commit 700f26c
Show file tree

Hide file tree

Showing 39 changed files with 538 additions and 52 deletions.
diff --git a/docs/404.html b/docs/404.html
@@ -7,9 +7,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <style type="text/css">@font-face{font-family:'Lato';font-style:italic;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6u8w4BMUTPHjxsAUi-qJCY.woff2) format('woff2');unicode-range:U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}@font-face{font-family:'Lato';font-style:italic;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6u8w4BMUTPHjxsAXC-q.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family:'Lato';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh7USSwaPGR_p.woff2) format('woff2');unicode-range:U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}@font-face{font-family:'Lato';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh7USSwiPGQ.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');unicode-range:U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh6UVSwaPGR_p.woff2) format('woff2');unicode-range:U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh6UVSwiPGQ.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}</style>
-<style>:root{--background-color: #ffffff;--text-color: #000000;--angle: 90deg;--orange-red: oklch(63.32% .24 31.68);--vivid-pink: oklch(69.02% .277 332.77);--electric-violet: oklch(53.18% .28 296.97);font-family:Lato,sans-serif}
-</style><link rel="stylesheet" href="styles-VDYJJVQD.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles-VDYJJVQD.css"></noscript><link rel="modulepreload" href="chunk-7KCQL4JG.js"></head>
+<style>:root{font-family:Lato,sans-serif;--background-color: #ffffff;--text-color: #000000;--angle: 90deg;--orange-red: oklch(63.32% .24 31.68);--vivid-pink: oklch(69.02% .277 332.77);--electric-violet: oklch(53.18% .28 296.97)}
+</style><link rel="stylesheet" href="styles-IVSJCZRN.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles-IVSJCZRN.css"></noscript><link rel="modulepreload" href="chunk-FFERV7KG.js"></head>
 <body>
   <app-root></app-root>
-<script src="polyfills-LZBJRJJE.js" type="module"></script><script src="main-7F77LZKP.js" type="module"></script></body>
+<script src="polyfills-LZBJRJJE.js" type="module"></script><script src="main-3NJRLX5G.js" type="module"></script></body>
 </html>
diff --git a/docs/chunk-6NKNFAZO.js b/docs/chunk-6NKNFAZO.js
diff --git a/docs/chunk-7KCQL4JG.js b/docs/chunk-7KCQL4JG.js
diff --git a/docs/chunk-LTCTQSZP.js → docs/chunk-B6FZAGNB.js b/docs/chunk-LTCTQSZP.js → docs/chunk-B6FZAGNB.js
diff --git a/docs/chunk-C6UHWLIE.js b/docs/chunk-C6UHWLIE.js
diff --git a/docs/chunk-EDRLWKBO.js b/docs/chunk-EDRLWKBO.js
diff --git a/docs/chunk-FFERV7KG.js b/docs/chunk-FFERV7KG.js
diff --git a/docs/chunk-3POQQ5CV.js → docs/chunk-NH7Q35HT.js b/docs/chunk-3POQQ5CV.js → docs/chunk-NH7Q35HT.js
diff --git a/docs/chunk-QFRPEGSN.js b/docs/chunk-QFRPEGSN.js
diff --git a/docs/chunk-VNIR2H63.js b/docs/chunk-VNIR2H63.js
diff --git a/docs/chunk-YXC5J77W.js b/docs/chunk-YXC5J77W.js
diff --git a/docs/index.html b/docs/index.html
@@ -7,9 +7,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <style type="text/css">@font-face{font-family:'Lato';font-style:italic;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6u8w4BMUTPHjxsAUi-qJCY.woff2) format('woff2');unicode-range:U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}@font-face{font-family:'Lato';font-style:italic;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6u8w4BMUTPHjxsAXC-q.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family:'Lato';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh7USSwaPGR_p.woff2) format('woff2');unicode-range:U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}@font-face{font-family:'Lato';font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh7USSwiPGQ.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');unicode-range:U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh6UVSwaPGR_p.woff2) format('woff2');unicode-range:U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh6UVSwiPGQ.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}</style>
-<style>:root{--background-color: #ffffff;--text-color: #000000;--angle: 90deg;--orange-red: oklch(63.32% .24 31.68);--vivid-pink: oklch(69.02% .277 332.77);--electric-violet: oklch(53.18% .28 296.97);font-family:Lato,sans-serif}
-</style><link rel="stylesheet" href="styles-VDYJJVQD.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles-VDYJJVQD.css"></noscript><link rel="modulepreload" href="chunk-7KCQL4JG.js"></head>
+<style>:root{font-family:Lato,sans-serif;--background-color: #ffffff;--text-color: #000000;--angle: 90deg;--orange-red: oklch(63.32% .24 31.68);--vivid-pink: oklch(69.02% .277 332.77);--electric-violet: oklch(53.18% .28 296.97)}
+</style><link rel="stylesheet" href="styles-IVSJCZRN.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles-IVSJCZRN.css"></noscript><link rel="modulepreload" href="chunk-FFERV7KG.js"></head>
 <body>
   <app-root></app-root>
-<script src="polyfills-LZBJRJJE.js" type="module"></script><script src="main-7F77LZKP.js" type="module"></script></body>
+<script src="polyfills-LZBJRJJE.js" type="module"></script><script src="main-3NJRLX5G.js" type="module"></script></body>
 </html>
diff --git a/docs/main-3NJRLX5G.js b/docs/main-3NJRLX5G.js
diff --git a/docs/main-7F77LZKP.js b/docs/main-7F77LZKP.js
diff --git a/docs/styles-IVSJCZRN.css b/docs/styles-IVSJCZRN.css
diff --git a/docs/styles-VDYJJVQD.css b/docs/styles-VDYJJVQD.css
diff --git a/src/app/about.component.ts b/src/app/about.component.ts
@@ -10,16 +10,26 @@ import { LoaderComponent } from './defer-usecases/loader';
   `,
   template: `
     <article>
+      <h3>about the <code>&#64;defer</code> block</h3>
       <ul>
         <li>Angular <code>&#64;defer</code> block allows standalone <strong>components</strong>, <strong>directives</strong> and <strong>pipes</strong> to be dynamically loaded in runtime (via separate bundles) whenever a specified contition is met.</li>
+      </ul>
+    </article>
+    <article>
+      <h3>about this app</h3>
+      <ul>
         <li>Open browser devtools <em>Network</em> tab:<ul>
           <li>to see <strong>bundles lazily loaded</strong></li>
           <li>to <strong>throttle</strong> your connection speed (see the spinner)</li>
         </ul></li>
-        <li>In these examples: <ul>
-          <li>All routed components are statically imported on router level</li>
-          <li>Only their content is lazily loaded via <code>&#64;defer</code> block</li>
-          <li>All <code>&#64;loading</code> use the following spinner: <div><loader/></div></li>
+        <li>Each routed component: <ul>
+          <li>is statically imported on router level</li>
+          <li>includes 3 elements in a <code>&#64;defer</code> block: <code>&#64;defer</code> block: <ol>
+            <li>its <strong>dedicated</strong> (separate) lazy loaded component (each example has its own, not shared across sections)</li>
+            <li>a <strong>shared</strong> component (will get lazy loaded only the first time</li>
+            <li>a non-standalone component (belongs to an NgModule) which won't get lazy loaded at all (lazy loading works only for <strong>standalone</strong> components</li>
+          </ol></li>
+          <li>uses the following spinner within the <code>&#64;loading</code>: <div><loader/></div></li>
         </ul></li>
       </ul>
     </article>

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -8,17 +8,17 @@ import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
   imports: [CommonModule, RouterOutlet, RouterLink, RouterLinkActive],
   styles: `
     .gradient-text {
-      background-size: 100%;
-      -webkit-background-clip: text;
-      -moz-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      -moz-text-fill-color: transparent;
     }
 
     h1 {
       font-size: 24px;
       margin-bottom: 20px;
       background: -webkit-linear-gradient(var(--angle),var(--orange-red) 0%,var(--vivid-pink) 50%,var(--electric-violet) 100%);
+      background-size: 100%;
+      -webkit-background-clip: text;
+      -moz-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      -moz-text-fill-color: transparent;
     }
 
     nav {
@@ -38,16 +38,27 @@ import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
 
     a.active {
       font-weight: bold;
+      background: -webkit-linear-gradient(var(--angle),var(--orange-red) 0%,var(--vivid-pink) 50%,var(--electric-violet) 100%);
+      background-size: 100%;
+      -webkit-background-clip: text;
+      -moz-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      -moz-text-fill-color: transparent;
     }
   `,
   template: `
-    <h1 class="gradient-text"> Angular ⚡️ <code>&#64;defer</code> ⚡️ Live Examples</h1>
-    <section>by Tomasz Ducin, <a href="http://ducin.it/">ducin.it</a>, <a href="https://twitter.com/tomasz_ducin">&#64;tomasz_ducin</a></section>
+    <h1> Angular ⚡️ <code>&#64;defer</code> ⚡️ Live Examples</h1>
+    <section><strong>author</strong>: by Tomasz Ducin, <a href="http://ducin.it/">ducin.it</a>, <a href="https://twitter.com/tomasz_ducin">&#64;tomasz_ducin</a>, see this <a href="https://github.com/ducin/angular-defer">github repo</a></section>
+    <section><strong>documentation</strong>: <a href="https://angular.dev/guide/defer">official docs</a>, <a href="https://angular.io/guide/defer">legacy docs</a></section>
     <nav>
-      <a routerLink="/" routerLinkActive="active">About</a>
-      <a routerLink="/defer-when-condition" routerLinkActive="active">when condition</a>
-      <a routerLink="/defer-on-hover" routerLinkActive="active">on hover</a>
-      more to come...
+      <a routerLink="/about" routerLinkActive="active">About</a>
+      <a routerLink="/defer-when-condition" routerLinkActive="active">⚡️ when condition</a>
+      <a routerLink="/defer-on-idle" routerLinkActive="active">⚡️ on idle</a>
+      <a routerLink="/defer-on-viewport" routerLinkActive="active">⚡️ on viewport</a>
+      <a routerLink="/defer-on-interaction" routerLinkActive="active">⚡️ on interaction</a>
+      <a routerLink="/defer-on-hover" routerLinkActive="active">⚡️ on hover</a>
+      <a routerLink="/defer-on-immediate" routerLinkActive="active">⚡️ on immediate</a>
+      <a routerLink="/defer-on-timer" routerLinkActive="active">⚡️ on timer</a>
     </nav>
     <router-outlet></router-outlet>
   `