diff --git a/adev-es/src/content/tutorials/deferrable-views/intro/README.en.md b/adev-es/src/content/tutorials/deferrable-views/intro/README.en.md
new file mode 100644
index 0000000..87fbf0d
--- /dev/null
+++ b/adev-es/src/content/tutorials/deferrable-views/intro/README.en.md
@@ -0,0 +1,11 @@
+# Deferrable views tutorial
+
+This interactive tutorial consists of lessons that introduce the Angular deferrable views concepts.
+
+## How to use this tutorial
+
+Each step represents a concept in Angular deferrable views. You can do one, or all of them.
+
+If you get stuck, click "Reveal answer" at the top.
+
+Alright, let's [get started](/tutorials/deferrable-views/1-what-are-deferrable-views).
diff --git a/adev-es/src/content/tutorials/deferrable-views/intro/README.md b/adev-es/src/content/tutorials/deferrable-views/intro/README.md
index 87fbf0d..0511689 100644
--- a/adev-es/src/content/tutorials/deferrable-views/intro/README.md
+++ b/adev-es/src/content/tutorials/deferrable-views/intro/README.md
@@ -1,11 +1,11 @@
-# Deferrable views tutorial
+# Tutorial de vistas diferibles (deferrable views)
-This interactive tutorial consists of lessons that introduce the Angular deferrable views concepts.
+Este tutorial interactivo consiste en lecciones que introducen los conceptos de las vistas diferibles (deferrable views) de Angular.
-## How to use this tutorial
+## Cómo usar este tutorial
-Each step represents a concept in Angular deferrable views. You can do one, or all of them.
+Cada paso representa un concepto en las vistas diferibles de Angular. Puedes hacer uno, o todos ellos.
-If you get stuck, click "Reveal answer" at the top.
+Si te quedas atascado, haz clic en "Reveal answer" (Mostrar respuesta) en la parte superior.
-Alright, let's [get started](/tutorials/deferrable-views/1-what-are-deferrable-views).
+Muy bien, [comencemos](/tutorials/deferrable-views/1-what-are-deferrable-views).
diff --git a/adev-es/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/README.en.md b/adev-es/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/README.en.md
new file mode 100644
index 0000000..97abbd3
--- /dev/null
+++ b/adev-es/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/README.en.md
@@ -0,0 +1,37 @@
+# What are deferrable views?
+
+A fully rendered Angular page may contain many different components, directives, and pipes. While certain parts of the page should be shown to the user immediately, there may be portions that can wait to display until later.
+Angular's _deferrable views_, using the `@defer` syntax, can help you speed up your application by telling Angular to wait to download the JavaScript for the parts of the page that don't need to be shown right away.
+
+In this activity, you'll learn how to use deferrable views to defer load a section of your component template.
+
+
+
+
+
+
+In your `app.ts`, wrap the `article-comments` component with a `@defer` block to defer load it.
+
+
+@defer {
+
+}
+
+
+By default, `@defer` loads the `article-comments` component when the browser is idle.
+
+In your browser's developer console, you can see that the `article-comments-component` lazy chunk file is loaded separately (The specific file names may change from run to run):
+
+
+Initial chunk files | Names | Raw size
+chunk-NNSQHFIE.js | - | 769.00 kB |
+main.js | main | 229.25 kB |
+
+Lazy chunk files | Names | Raw size
+chunk-T5UYXUSI.js | article-comments-component | 1.84 kB |
+
+
+
+
+
+Great work! You’ve learned the basics of deferrable views.
diff --git a/adev-es/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/README.md b/adev-es/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/README.md
index 97abbd3..d6c92e6 100644
--- a/adev-es/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/README.md
+++ b/adev-es/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/README.md
@@ -1,16 +1,16 @@
-# What are deferrable views?
+# ¿Qué son las vistas diferibles?
-A fully rendered Angular page may contain many different components, directives, and pipes. While certain parts of the page should be shown to the user immediately, there may be portions that can wait to display until later.
-Angular's _deferrable views_, using the `@defer` syntax, can help you speed up your application by telling Angular to wait to download the JavaScript for the parts of the page that don't need to be shown right away.
+Una página Angular completamente renderizada puede contener muchos componentes, directivas y pipes diferentes. Si bien ciertas partes de la página deberían mostrarse al usuario de inmediato, puede haber porciones que pueden esperar para mostrarse hasta más tarde.
+Las _vistas diferibles (deferrable views)_ de Angular, usando la sintaxis `@defer`, pueden ayudarte a acelerar tu aplicación indicándole a Angular que espere para descargar el JavaScript de las partes de la página que no necesitan mostrarse de inmediato.
-In this activity, you'll learn how to use deferrable views to defer load a section of your component template.
+En esta actividad, aprenderás cómo usar vistas diferibles para cargar de forma diferida una sección de la plantilla de tu componente.
-
-In your `app.ts`, wrap the `article-comments` component with a `@defer` block to defer load it.
+
+En tu `app.ts`, envuelve el componente `article-comments` con un bloque `@defer` para cargarlo de forma diferida.
@defer {
@@ -18,9 +18,9 @@ In your `app.ts`, wrap the `article-comments` component with a `@defer` block to
}
-By default, `@defer` loads the `article-comments` component when the browser is idle.
+Por defecto, `@defer` carga el componente `article-comments` cuando el navegador está inactivo.
-In your browser's developer console, you can see that the `article-comments-component` lazy chunk file is loaded separately (The specific file names may change from run to run):
+En la consola de desarrollador de tu navegador, puedes ver que el archivo del chunk lazy `article-comments-component` se carga por separado (Los nombres de archivo específicos pueden cambiar de una ejecución a otra):
Initial chunk files | Names | Raw size
@@ -34,4 +34,4 @@ chunk-T5UYXUSI.js | article-comments-component | 1.84 kB |
-Great work! You’ve learned the basics of deferrable views.
+¡Excelente trabajo! Has aprendido los conceptos básicos de las vistas diferibles.
diff --git a/adev-es/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/README.en.md b/adev-es/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/README.en.md
new file mode 100644
index 0000000..9d32e42
--- /dev/null
+++ b/adev-es/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/README.en.md
@@ -0,0 +1,106 @@
+# @loading, @error and @placeholder blocks
+
+Deferrable views let you define content to be shown in different loading states.
+
+
+
+
+
@placeholder
+
+ By default, defer blocks do not render any content before they are triggered. The @placeholder is an optional block that declares content to show before the deferred content loads. Angular replaces the placeholder with the deferred content after loading completes. While this block is optional, the Angular team recommends always including a placeholder.
+
+ Learn more in the full deferrable views documentation
+
+
+
+
+
@loading
+
+ This optional block allows you to declare content to be shown during the loading of any deferred dependencies.
+
+
+
+
@error
+
+ This block allows you to declare content which is shown if deferred loading fails.
+
+
+
+
+
+The contents of all the above sub-blocks are eagerly loaded. Additionally, some features require a `@placeholder` block.
+
+In this activity, you'll learn how to use the `@loading`, `@error` and `@placeholder` blocks to manage the states of deferrable views.
+
+
+
+
+
+
+In your `app.ts`, add a `@placeholder` block to the `@defer` block.
+
+
+@defer {
+
+} @placeholder {
+
Placeholder for comments
+}
+
+
+
+
+The `@placeholder` block accepts an optional parameter to specify the `minimum` amount of time that this placeholder should be shown. This `minimum` parameter is specified in time increments of milliseconds (ms) or seconds (s). This parameter exists to prevent fast flickering of placeholder content in the case that the deferred dependencies are fetched quickly.
+
+
+@defer {
+
+} @placeholder (minimum 1s) {
+
Placeholder for comments
+}
+
+
+
+
+Next add a `@loading` block to the component template.
+
+The `@loading` block accepts two optional parameters:
+
+- `minimum`: the amount of time that this block should be shown
+- `after`: the amount of time to wait after loading begins before showing the loading template
+
+Both parameters are specified in time increments of milliseconds (ms) or seconds (s).
+
+Update `app.ts` to include a `@loading` block with a minimum parameter of `1s` as well as an after parameter with the value 500ms to the @loading block.
+
+
+@defer {
+
+} @placeholder (minimum 1s) {
+
Placeholder for comments
+} @loading (minimum 1s; after 500ms) {
+
Loading comments...
+}
+
+
+NOTE: this example uses two parameters, separated by the ; character.
+
+
+
+
+Finally, add an `@error` block to the `@defer` block.
+
+
+@defer {
+
+} @placeholder (minimum 1s) {
+
Placeholder for comments
+} @loading (minimum 1s; after 500ms) {
+
Loading comments...
+} @error {
+
Failed to load comments
+}
+
+
+
+
+Congratulations! At this point, you have a good understanding about deferrable views. Keep up the great work and let's learn about triggers next.
diff --git a/adev-es/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/README.md b/adev-es/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/README.md
index 9d32e42..735ef16 100644
--- a/adev-es/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/README.md
+++ b/adev-es/src/content/tutorials/deferrable-views/steps/2-loading-error-placeholder/README.md
@@ -1,43 +1,43 @@
-# @loading, @error and @placeholder blocks
+# Bloques @loading, @error y @placeholder
-Deferrable views let you define content to be shown in different loading states.
+Las vistas diferibles te permiten definir contenido que se mostrará en diferentes estados de carga.
@placeholder
- By default, defer blocks do not render any content before they are triggered. The @placeholder is an optional block that declares content to show before the deferred content loads. Angular replaces the placeholder with the deferred content after loading completes. While this block is optional, the Angular team recommends always including a placeholder.
+ Por defecto, los bloques defer no renderizan ningún contenido antes de ser disparados. El bloque @placeholder es un bloque opcional que declara contenido para mostrar antes de que el contenido diferido se cargue. Angular reemplaza el placeholder con el contenido diferido después de que la carga se completa. Aunque este bloque es opcional, el equipo de Angular recomienda incluir siempre un placeholder.
- Learn more in the full deferrable views documentation
+ Aprende más en la documentación completa de vistas diferibles
@loading
- This optional block allows you to declare content to be shown during the loading of any deferred dependencies.
+ Este bloque opcional te permite declarar contenido que se mostrará durante la carga de cualquier dependencia diferida.
@error
- This block allows you to declare content which is shown if deferred loading fails.
+ Este bloque te permite declarar contenido que se muestra si la carga diferida falla.
-The contents of all the above sub-blocks are eagerly loaded. Additionally, some features require a `@placeholder` block.
+El contenido de todos los sub-bloques anteriores se carga de forma inmediata. Adicionalmente, algunas funcionalidades requieren un bloque `@placeholder`.
-In this activity, you'll learn how to use the `@loading`, `@error` and `@placeholder` blocks to manage the states of deferrable views.
+En esta actividad, aprenderás cómo usar los bloques `@loading`, `@error` y `@placeholder` para gestionar los estados de las vistas diferibles.
-
-In your `app.ts`, add a `@placeholder` block to the `@defer` block.
+
+En tu `app.ts`, agrega un bloque `@placeholder` al bloque `@defer`.
@defer {
@@ -48,8 +48,8 @@ In your `app.ts`, add a `@placeholder` block to the `@defer` block.
-
-The `@placeholder` block accepts an optional parameter to specify the `minimum` amount of time that this placeholder should be shown. This `minimum` parameter is specified in time increments of milliseconds (ms) or seconds (s). This parameter exists to prevent fast flickering of placeholder content in the case that the deferred dependencies are fetched quickly.
+
+El bloque `@placeholder` acepta un parámetro opcional para especificar la cantidad de tiempo `minimum` que este placeholder debe mostrarse. Este parámetro `minimum` se especifica en incrementos de tiempo de milisegundos (ms) o segundos (s). Este parámetro existe para evitar el parpadeo rápido del contenido del placeholder en caso de que las dependencias diferidas se obtengan rápidamente.
@defer {
@@ -60,17 +60,17 @@ The `@placeholder` block accepts an optional parameter to specify the `minimum`
-
-Next add a `@loading` block to the component template.
+
+A continuación, agrega un bloque `@loading` a la plantilla del componente.
-The `@loading` block accepts two optional parameters:
+El bloque `@loading` acepta dos parámetros opcionales:
-- `minimum`: the amount of time that this block should be shown
-- `after`: the amount of time to wait after loading begins before showing the loading template
+- `minimum`: la cantidad de tiempo que este bloque debe mostrarse
+- `after`: la cantidad de tiempo a esperar después de que comience la carga antes de mostrar la plantilla de carga
-Both parameters are specified in time increments of milliseconds (ms) or seconds (s).
+Ambos parámetros se especifican en incrementos de tiempo de milisegundos (ms) o segundos (s).
-Update `app.ts` to include a `@loading` block with a minimum parameter of `1s` as well as an after parameter with the value 500ms to the @loading block.
+Actualiza `app.ts` para incluir un bloque `@loading` con un parámetro minimum de `1s` así como un parámetro after con el valor 500ms para el bloque @loading.
@defer {
@@ -82,12 +82,12 @@ Update `app.ts` to include a `@loading` block with a minimum parameter of `1s` a
}
-NOTE: this example uses two parameters, separated by the ; character.
+NOTA: este ejemplo usa dos parámetros, separados por el carácter ;.
-
-Finally, add an `@error` block to the `@defer` block.
+
+Finalmente, agrega un bloque `@error` al bloque `@defer`.
@defer {
@@ -103,4 +103,4 @@ Finally, add an `@error` block to the `@defer` block.
-Congratulations! At this point, you have a good understanding about deferrable views. Keep up the great work and let's learn about triggers next.
+¡Felicidades! En este punto, tienes un buen entendimiento sobre las vistas diferibles. Sigue con el excelente trabajo y aprendamos sobre los triggers a continuación.
diff --git a/adev-es/src/content/tutorials/deferrable-views/steps/3-defer-triggers/README.en.md b/adev-es/src/content/tutorials/deferrable-views/steps/3-defer-triggers/README.en.md
new file mode 100644
index 0000000..4308728
--- /dev/null
+++ b/adev-es/src/content/tutorials/deferrable-views/steps/3-defer-triggers/README.en.md
@@ -0,0 +1,109 @@
+# Defer triggers
+
+While the default options for `@defer` offer great options for lazy loading parts of your components it may still be desirable to further customize the deferred loading experience.
+
+By default, deferred content loads when the browser is idle. You can, however, customize when this loading occurs by specifying a **trigger**. This lets you pick the loading behavior best suited to your component.
+
+Deferrable views offer two types of loading trigger:
+
+
+
+
+
on
+
+ A trigger condition using a trigger from the list of built-in triggers.
+ For example: @defer (on viewport)
+
+
+
+
when
+
+ A condition as an expression which is evaluated for truthiness. When the expression is truthy, the placeholder is swapped with the lazily loaded content.
+ For example: @defer (when customizedCondition)
+
+
+
+
+
+If the `when` condition evaluates to `false`, the `defer` block is not reverted back to the placeholder. The swap is a one-time operation.
+
+You can define multiple event triggers at once, these triggers will be evaluated as OR conditions.
+
+- Ex: `@defer (on viewport; on timer(2s))`
+- Ex: `@defer (on viewport; when customizedCondition)`
+
+In this activity, you'll learn how to use triggers to specify the condition to load the deferrable views.
+
+
+
+
+
+
+In your `app.ts`, add an `on hover` trigger to the `@defer` block.
+
+
+@defer (on hover) {
+
+} @placeholder (minimum 1s) {
+
Placeholder for comments
+} @loading (minimum 1s; after 500ms) {
+
Loading comments...
+} @error {
+
Failed to load comments
+}
+
+
+Now, the page will not render the comments section until you hover its placeholder.
+
+
+
+Next, update the template to include a button with the label "Show all comments". Include a template variable called `#showComments` with the button.
+
+
+
+
+@defer (on hover) {
+
+} @placeholder (minimum 1s) {
+
+
Placeholder for comments
+} @loading (minimum 1s; after 500ms) {
+
Loading comments...
+} @error {
+
Failed to load comments
+}
+
+
+NOTE: for more information on [template variables check the documentation](https://angular.dev/guide/templates/reference-variables#).
+
+
+
+
+Update the `@defer` block in the template to use the `on interaction` trigger. Provide the `showComments` template variable as the parameter to `interaction`.
+
+
+
+
+@defer (on hover; on interaction(showComments)) {
+
+} @placeholder (minimum 1s) {
+
+
Placeholder for comments
+} @loading (minimum 1s; after 500ms) {
+
Loading comments...
+} @error {
+
Failed to load comments
+}
+
+
+With these changes, the page will wait for one of the following conditions before rendering the comments section:
+
+- User hovers the comments section’s placeholder
+- User clicks on the “Show all comments" button
+
+You can reload the page to try out different triggers to render the comments section.
+
+
+
+If you would like to learn more, check out the documentation for [Deferrable View](https://angular.dev/guide/defer).
+Keep learning to unlock more of Angular's great features.
diff --git a/adev-es/src/content/tutorials/deferrable-views/steps/3-defer-triggers/README.md b/adev-es/src/content/tutorials/deferrable-views/steps/3-defer-triggers/README.md
index 4308728..d693548 100644
--- a/adev-es/src/content/tutorials/deferrable-views/steps/3-defer-triggers/README.md
+++ b/adev-es/src/content/tutorials/deferrable-views/steps/3-defer-triggers/README.md
@@ -1,45 +1,45 @@
-# Defer triggers
+# Disparadores de defer (defer triggers)
-While the default options for `@defer` offer great options for lazy loading parts of your components it may still be desirable to further customize the deferred loading experience.
+Si bien las opciones predeterminadas para `@defer` ofrecen excelentes opciones para lazy loading de partes de tus componentes, puede ser deseable personalizar aún más la experiencia de carga diferida.
-By default, deferred content loads when the browser is idle. You can, however, customize when this loading occurs by specifying a **trigger**. This lets you pick the loading behavior best suited to your component.
+Por defecto, el contenido diferido se carga cuando el navegador está inactivo. Sin embargo, puedes personalizar cuándo ocurre esta carga especificando un **trigger** (disparador). Esto te permite elegir el comportamiento de carga más adecuado para tu componente.
-Deferrable views offer two types of loading trigger:
+Las vistas diferibles ofrecen dos tipos de triggers de carga:
on
- A trigger condition using a trigger from the list of built-in triggers.
- For example: @defer (on viewport)
+ Una condición de trigger usando un trigger de la lista de triggers integrados.
+ Por ejemplo: @defer (on viewport)
when
- A condition as an expression which is evaluated for truthiness. When the expression is truthy, the placeholder is swapped with the lazily loaded content.
- For example: @defer (when customizedCondition)
+ Una condición como expresión que se evalúa para determinar su veracidad. Cuando la expresión es verdadera, el placeholder se reemplaza con el contenido cargado de forma diferida.
+ Por ejemplo: @defer (when customizedCondition)
-If the `when` condition evaluates to `false`, the `defer` block is not reverted back to the placeholder. The swap is a one-time operation.
+Si la condición `when` se evalúa como `false`, el bloque `defer` no se revierte al placeholder. El intercambio es una operación de una sola vez.
-You can define multiple event triggers at once, these triggers will be evaluated as OR conditions.
+Puedes definir múltiples triggers de eventos a la vez, estos triggers se evaluarán como condiciones OR.
-- Ex: `@defer (on viewport; on timer(2s))`
-- Ex: `@defer (on viewport; when customizedCondition)`
+- Ej: `@defer (on viewport; on timer(2s))`
+- Ej: `@defer (on viewport; when customizedCondition)`
-In this activity, you'll learn how to use triggers to specify the condition to load the deferrable views.
+En esta actividad, aprenderás cómo usar triggers para especificar la condición para cargar las vistas diferibles.
-
-In your `app.ts`, add an `on hover` trigger to the `@defer` block.
+
+En tu `app.ts`, agrega un trigger `on hover` al bloque `@defer`.
@defer (on hover) {
@@ -53,11 +53,11 @@ In your `app.ts`, add an `on hover` trigger to the `@defer` block.
}
-Now, the page will not render the comments section until you hover its placeholder.
+Ahora, la página no renderizará la sección de comentarios hasta que pases el cursor sobre su placeholder.
-
-Next, update the template to include a button with the label "Show all comments". Include a template variable called `#showComments` with the button.
+
+A continuación, actualiza la plantilla para incluir un botón con la etiqueta "Show all comments". Incluye una variable de plantilla llamada `#showComments` con el botón.
@@ -74,12 +74,12 @@ Next, update the template to include a button with the label "Show all comments"
}
-NOTE: for more information on [template variables check the documentation](https://angular.dev/guide/templates/reference-variables#).
+NOTA: para obtener más información sobre [variables de plantilla consulta la documentación](https://angular.dev/guide/templates/reference-variables#).
-
-Update the `@defer` block in the template to use the `on interaction` trigger. Provide the `showComments` template variable as the parameter to `interaction`.
+
+Actualiza el bloque `@defer` en la plantilla para usar el trigger `on interaction`. Proporciona la variable de plantilla `showComments` como parámetro a `interaction`.
@@ -96,14 +96,14 @@ Update the `@defer` block in the template to use the `on interaction` trigger. P
}
-With these changes, the page will wait for one of the following conditions before rendering the comments section:
+Con estos cambios, la página esperará una de las siguientes condiciones antes de renderizar la sección de comentarios:
-- User hovers the comments section’s placeholder
-- User clicks on the “Show all comments" button
+- El usuario pasa el cursor sobre el placeholder de la sección de comentarios
+- El usuario hace clic en el botón "Show all comments"
-You can reload the page to try out different triggers to render the comments section.
+Puedes recargar la página para probar diferentes triggers para renderizar la sección de comentarios.
-If you would like to learn more, check out the documentation for [Deferrable View](https://angular.dev/guide/defer).
-Keep learning to unlock more of Angular's great features.
+Si deseas aprender más, consulta la documentación de [Deferrable View](https://angular.dev/guide/defer).
+Sigue aprendiendo para descubrir más características increíbles de Angular.