translate: translations for deferrable views tutorial

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).

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).

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.
+
+<hr>
+
+<docs-workflow>
+
+<docs-step title="Add a `@defer` block to a section of a template">
+In your `app.ts`, wrap the `article-comments` component with a `@defer` block to defer load it.
+
+<docs-code language="angular-html">
+@defer {
+  <article-comments />
+}
+</docs-code>
+
+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):
+
+<docs-code language="markdown">
+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 |
+</docs-code>
+
+</docs-step>
+</docs-workflow>
+
+Great work! You’ve learned the basics of deferrable views.

adev-es/src/content/tutorials/deferrable-views/steps/1-what-are-deferrable-views/README.md

@@ -1,26 +1,26 @@
-# 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.
 
 <hr>
 
 <docs-workflow>
 
-<docs-step title="Add a `@defer` block to a section of a template">
-In your `app.ts`, wrap the `article-comments` component with a `@defer` block to defer load it.
+<docs-step title="Agrega un bloque `@defer` a una sección de una plantilla">
+En tu `app.ts`, envuelve el componente `article-comments` con un bloque `@defer` para cargarlo de forma diferida.
 
 <docs-code language="angular-html">
 @defer {
   <article-comments />
 }
 </docs-code>
 
-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):
 
 <docs-code language="markdown">
 Initial chunk files | Names                      |  Raw size
@@ -34,4 +34,4 @@ chunk-T5UYXUSI.js | article-comments-component | 1.84 kB |
 </docs-step>
 </docs-workflow>
 
-Great work! You’ve learned the basics of deferrable views.
+¡Excelente trabajo! Has aprendido los conceptos básicos de las vistas diferibles.

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.
+
+<div class="docs-table docs-scroll-track-transparent">
+  <table>
+    <tr>
+      <td><code>@placeholder</code></td>
+      <td>
+        By default, defer blocks do not render any content before they are triggered. The <code>@placeholder</code> 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.
+        <a href="https://angular.dev/guide/templates/defer#triggers" target="_blank">
+          Learn more in the full deferrable views documentation
+        </a>
+      </td>
+    </tr>
+    <tr>
+      <td><code>@loading</code></td>
+      <td>
+        This optional block allows you to declare content to be shown during the loading of any deferred dependencies.
+      </td>
+    </tr>
+    <tr>
+      <td><code>@error</code></td>
+      <td>
+        This block allows you to declare content which is shown if deferred loading fails.
+      </td>
+    </tr>
+  </table>
+</div>
+
+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.
+
+<hr>
+
+<docs-workflow>
+
+<docs-step title="Add `@placeholder` block">
+In your `app.ts`, add a `@placeholder` block to the `@defer` block.
+
+<docs-code language="angular-html" highlight="[3,4,5]">
+@defer {
+  <article-comments />
+} @placeholder {
+  <p>Placeholder for comments</p>
+}
+</docs-code>
+</docs-step>
+
+<docs-step title="Configure the `@placeholder` 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.
+
+<docs-code language="angular-html" highlight="[3,4,5]">
+@defer {
+  <article-comments />
+} @placeholder (minimum 1s) {
+  <p>Placeholder for comments</p>
+}
+</docs-code>
+</docs-step>
+
+<docs-step title="Add `@loading` block">
+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.
+
+<docs-code language="angular-html" highlight="[5,6,7]">
+@defer {
+  <article-comments />
+} @placeholder (minimum 1s) {
+  <p>Placeholder for comments</p>
+} @loading (minimum 1s; after 500ms) {
+  <p>Loading comments...</p>
+}
+</docs-code>
+
+NOTE: this example uses two parameters, separated by the ; character.
+
+</docs-step>
+
+<docs-step title="Add `@error` block">
+Finally, add an `@error` block to the `@defer` block.
+
+<docs-code language="angular-html" highlight="[7,8,9]">
+@defer {
+  <article-comments />
+} @placeholder (minimum 1s) {
+  <p>Placeholder for comments</p>
+} @loading (minimum 1s; after 500ms) {
+  <p>Loading comments...</p>
+} @error {
+  <p>Failed to load comments</p>
+}
+</docs-code>
+</docs-step>
+</docs-workflow>
+
+Congratulations! At this point, you have a good understanding about deferrable views. Keep up the great work and let's learn about triggers next.

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.
 
 <div class="docs-table docs-scroll-track-transparent">
   <table>
     <tr>
       <td><code>@placeholder</code></td>
       <td>
-        By default, defer blocks do not render any content before they are triggered. The <code>@placeholder</code> 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 <code>@placeholder</code> 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.
         <a href="https://angular.dev/guide/templates/defer#triggers" target="_blank">
-          Learn more in the full deferrable views documentation
+          Aprende más en la documentación completa de vistas diferibles
         </a>
       </td>
     </tr>
     <tr>
       <td><code>@loading</code></td>
       <td>
-        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.
       </td>
     </tr>
     <tr>
       <td><code>@error</code></td>
       <td>
-        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.
       </td>
     </tr>
   </table>
 </div>
 
-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.
 
 <hr>
 
 <docs-workflow>
 
-<docs-step title="Add `@placeholder` block">
-In your `app.ts`, add a `@placeholder` block to the `@defer` block.
+<docs-step title="Agrega un bloque `@placeholder`">
+En tu `app.ts`, agrega un bloque `@placeholder` al bloque `@defer`.
 
 <docs-code language="angular-html" highlight="[3,4,5]">
 @defer {
@@ -48,8 +48,8 @@ In your `app.ts`, add a `@placeholder` block to the `@defer` block.
 </docs-code>
 </docs-step>
 
-<docs-step title="Configure the `@placeholder` 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.
+<docs-step title="Configura el bloque `@placeholder`">
+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.
 
 <docs-code language="angular-html" highlight="[3,4,5]">
 @defer {
@@ -60,17 +60,17 @@ The `@placeholder` block accepts an optional parameter to specify the `minimum`
 </docs-code>
 </docs-step>
 
-<docs-step title="Add `@loading` block">
-Next add a `@loading` block to the component template.
+<docs-step title="Agrega un bloque `@loading`">
+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.
 
 <docs-code language="angular-html" highlight="[5,6,7]">
 @defer {
@@ -82,12 +82,12 @@ Update `app.ts` to include a `@loading` block with a minimum parameter of `1s` a
 }
 </docs-code>
 
-NOTE: this example uses two parameters, separated by the ; character.
+NOTA: este ejemplo usa dos parámetros, separados por el carácter ;.
 
 </docs-step>
 
-<docs-step title="Add `@error` block">
-Finally, add an `@error` block to the `@defer` block.
+<docs-step title="Agrega un bloque `@error`">
+Finalmente, agrega un bloque `@error` al bloque `@defer`.
 
 <docs-code language="angular-html" highlight="[7,8,9]">
 @defer {
@@ -103,4 +103,4 @@ Finally, add an `@error` block to the `@defer` block.
 </docs-step>
 </docs-workflow>
 
-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.