Skip to content

Commit f884623

Browse files
IsmaestroIsmaestro
committed
feat(app): adjust defer view on viewport
1 parent f10540b commit f884623

3 files changed

Lines changed: 86 additions & 82 deletions

File tree

‎src/app/features/home/home.component.html‎

Lines changed: 81 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -41,89 +41,93 @@ <h1 i18n ngProjectAs="heading">
4141
/>
4242
</div>
4343

44-
<h2 i18n>Key features</h2>
44+
@defer (on viewport) {
45+
<h2 i18n>Key features</h2>
4546

46-
<div class="cards__grid-container">
47-
<app-card href="https://angular.dev/guide/signals">
48-
<ng-container i18n ngProjectAs="heading">
49-
<h3>Angular Signals</h3>
50-
</ng-container>
51-
<ng-container ngProjectAs="body">
52-
<p i18n>Unlock reactivity with Angular Signals.</p>
53-
<p i18n>
54-
Signals provide a declarative way to manage state and reactivity in your application,
55-
simplifying data flow and improving performance.
56-
</p>
57-
</ng-container>
58-
<ng-container ngProjectAs="link"><span i18n>Learn more about Signals</span></ng-container>
59-
</app-card>
60-
<app-card href="https://angular.dev/guide/i18n">
61-
<ng-container i18n ngProjectAs="heading">
62-
<h3>Internationalization</h3>
63-
</ng-container>
64-
<ng-container ngProjectAs="body">
65-
<p i18n>Build apps for a global audience.</p>
66-
<p i18n>
67-
Angular’s internationalization tools make it seamless to localize your app, handle
68-
translations, and format dates, numbers, and currencies for any locale.
69-
</p>
70-
</ng-container>
71-
<ng-container ngProjectAs="link"><span i18n>Explore Internationalization</span></ng-container>
72-
</app-card>
73-
<app-card href="https://angular.dev/guide/forms">
74-
<ng-container i18n ngProjectAs="heading">
75-
<h3>Reactive Forms</h3>
76-
</ng-container>
77-
<ng-container ngProjectAs="body">
78-
<p i18n>Effortless form handling and validation.</p>
79-
<p i18n>
80-
Reactive Forms empower you to create robust, dynamic forms with a model-driven approach,
81-
making validation, dynamic updates, and testing a breeze.
82-
</p>
83-
</ng-container>
84-
<ng-container ngProjectAs="link"><span i18n>Start with Reactive Forms</span></ng-container>
85-
</app-card>
86-
<app-card href="https://angular.dev/guide/animations">
87-
<ng-container i18n ngProjectAs="heading">
88-
<h3>Animations</h3>
89-
</ng-container>
90-
<ng-container ngProjectAs="body">
91-
<p i18n>Bring your UI to life with Angular Animations.</p>
92-
<p i18n>
93-
Create smooth transitions and engaging effects with Angular’s powerful animation API,
94-
making your application visually appealing and interactive.
95-
</p>
96-
</ng-container>
97-
<ng-container ngProjectAs="link"><span i18n>Discover Angular Animations</span></ng-container>
98-
</app-card>
99-
</div>
100-
<div class="decorative-image__container-1">
101-
<img
102-
alt="pokemon charizard"
103-
i18n-alt
104-
ngSrc="angularexampleapp/assets/images/charizard.png"
105-
width="814"
106-
height="858"
107-
priority
108-
/>
109-
</div>
110-
<div class="decorative-image__container-2">
111-
<img
112-
alt="pokemon blastoise"
113-
i18n-alt
114-
ngSrc="angularexampleapp/assets/images/blastoise.png"
115-
width="795"
116-
height="809"
117-
priority
118-
/>
119-
</div>
120-
@defer (hydrate on hover) {
47+
<div class="cards__grid-container">
48+
<app-card href="https://angular.dev/guide/signals">
49+
<ng-container i18n ngProjectAs="heading">
50+
<h3>Angular Signals</h3>
51+
</ng-container>
52+
<ng-container ngProjectAs="body">
53+
<p i18n>Unlock reactivity with Angular Signals.</p>
54+
<p i18n>
55+
Signals provide a declarative way to manage state and reactivity in your application,
56+
simplifying data flow and improving performance.
57+
</p>
58+
</ng-container>
59+
<ng-container ngProjectAs="link"><span i18n>Learn more about Signals</span></ng-container>
60+
</app-card>
61+
<app-card href="https://angular.dev/guide/i18n">
62+
<ng-container i18n ngProjectAs="heading">
63+
<h3>Internationalization</h3>
64+
</ng-container>
65+
<ng-container ngProjectAs="body">
66+
<p i18n>Build apps for a global audience.</p>
67+
<p i18n>
68+
Angular’s internationalization tools make it seamless to localize your app, handle
69+
translations, and format dates, numbers, and currencies for any locale.
70+
</p>
71+
</ng-container>
72+
<ng-container ngProjectAs="link"
73+
><span i18n>Explore Internationalization</span></ng-container
74+
>
75+
</app-card>
76+
<app-card href="https://angular.dev/guide/forms">
77+
<ng-container i18n ngProjectAs="heading">
78+
<h3>Reactive Forms</h3>
79+
</ng-container>
80+
<ng-container ngProjectAs="body">
81+
<p i18n>Effortless form handling and validation.</p>
82+
<p i18n>
83+
Reactive Forms empower you to create robust, dynamic forms with a model-driven approach,
84+
making validation, dynamic updates, and testing a breeze.
85+
</p>
86+
</ng-container>
87+
<ng-container ngProjectAs="link"><span i18n>Start with Reactive Forms</span></ng-container>
88+
</app-card>
89+
<app-card href="https://angular.dev/guide/animations">
90+
<ng-container i18n ngProjectAs="heading">
91+
<h3>Animations</h3>
92+
</ng-container>
93+
<ng-container ngProjectAs="body">
94+
<p i18n>Bring your UI to life with Angular Animations.</p>
95+
<p i18n>
96+
Create smooth transitions and engaging effects with Angular’s powerful animation API,
97+
making your application visually appealing and interactive.
98+
</p>
99+
</ng-container>
100+
<ng-container ngProjectAs="link"
101+
><span i18n>Discover Angular Animations</span></ng-container
102+
>
103+
</app-card>
104+
</div>
105+
<div class="decorative-image__container-1">
106+
<img
107+
alt="pokemon charizard"
108+
i18n-alt
109+
ngSrc="angularexampleapp/assets/images/charizard.png"
110+
width="814"
111+
height="858"
112+
priority
113+
/>
114+
</div>
115+
<div class="decorative-image__container-2">
116+
<img
117+
alt="pokemon blastoise"
118+
i18n-alt
119+
ngSrc="angularexampleapp/assets/images/blastoise.png"
120+
width="795"
121+
height="809"
122+
priority
123+
/>
124+
</div>
121125
<div class="real-time__container">
122126
<p i18n>Users seeing this page: {{ activeUsersResource.value().activeUsers }}</p>
123127
</div>
124128
} @placeholder {
125129
<div class="real-time__container">
126-
<p i18n>Do you want to see the real-time number of users? Hover me! (defer view).</p>
130+
<p i18n>Loading...</p>
127131
</div>
128132
}
129133
</main>

‎src/locale/messages.es.xlf‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -531,9 +531,9 @@
531531
<source>No session. Please log in.</source>
532532
<target state="new">No tienes sesion. Por favor, haz login.</target>
533533
</trans-unit>
534-
<trans-unit id="3410547210973057628" datatype="html">
535-
<source>Do you want to see the real-time number of users? Hover me! (defer view).</source>
536-
<target state="new">¿Quieres ver el número de usuarios en tiempo real? ¡Pasa el ratón por encima! (vista diferida).</target>
534+
<trans-unit id="3894950702316166331" datatype="html">
535+
<source>Loading...</source>
536+
<target state="new">Cargando...</target>
537537
</trans-unit>
538538
</body>
539539
</file>

‎src/locale/messages.xlf‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -394,8 +394,8 @@
394394
<trans-unit id="4584809804925421348" datatype="html">
395395
<source>No session. Please log in.</source>
396396
</trans-unit>
397-
<trans-unit id="3410547210973057628" datatype="html">
398-
<source>Do you want to see the real-time number of users? Hover me! (defer view).</source>
397+
<trans-unit id="3894950702316166331" datatype="html">
398+
<source>Loading...</source>
399399
</trans-unit>
400400
</body>
401401
</file>

0 commit comments

Comments
 (0)