--- title: "Esqueleto" description: "Ocupa el lugar del contenido mientras se carga, con marcadores de posición discretos que tienen la forma de lo que va a llegar (líneas de texto, un bloque, un círculo), y reserva la caja que ocupará el contenido, para que nada se mueva cuando llegue." url: "https://tanrei.chnotchy.com/es/components/skeleton/" last_updated: 2026-10-23T21:17:12.000Z --- # Esqueleto > Ocupa el lugar del contenido mientras se carga, con marcadores de posición discretos que tienen la forma de lo que va a llegar (líneas de texto, un bloque, un círculo), y reserva la caja que ocupará el contenido, para que nada se mueva cuando llegue. ## Descripción general Una vista suele llegar antes que su contenido. Un esqueleto reserva la forma de lo que va a llegar en el lugar donde estará: líneas de texto, un bloque para una imagen o un control, un círculo para la foto de una persona. Cuando el contenido llega, ocupa las cajas que se le habían reservado, y nada de lo que la persona estaba mirando, o a punto de pulsar, se mueve. Es una región y sus marcadores de posición. La región se dice una sola vez a la tecnología de apoyo («Cargando proyectos», ocupada), y los marcadores de posición no dicen nada por sí mismos. Espera un momento antes de mostrarse, de modo que una espera breve muestra un hueco del tamaño correcto en lugar de formas que parpadean. En la web es `` alrededor de tus propios elementos con `class="tanrei-skeleton-placeholder"`. Las demás plataformas todavía no lo han implementado. ### Un esqueleto, un indicador de carga, un indicador de progreso, un estado vacío Cuatro componentes responden a «aquí todavía no hay nada». Cuál usar depende de lo que se sabe de la espera y de lo que va a llegar. | La situación | Usa | Por qué | | --- | --- | --- | | Un contenido de forma conocida va a llenar una región de una vista, y la espera es lo bastante larga para verse. | Un esqueleto | Reserva el diseño, así que nada se mueve cuando el contenido llega, y muestra dónde estará cada cosa. | | Una espera breve de duración desconocida cuyo resultado no tiene una forma que reservar, o es pequeño: en un botón, una fila, un campo, una línea de estado. Una acción en curso, como guardar o enviar. | Un [indicador de carga](https://tanrei.chnotchy.com/es/components/loading-indicator/) | Basta con una marca. Las formas para una sola fila o un solo icono son ruido. | | Una tarea cuyo progreso se puede medir, o que tarda muchos segundos. | Un [indicador de progreso](https://tanrei.chnotchy.com/es/components/progress-indicator/) | Un esqueleto no dice nada sobre cuánto se ha avanzado, y al cabo de unos segundos la persona necesita saberlo. | | No va a llegar nada: la lista está vacía, la búsqueda no encontró nada. | Un [estado vacío](https://tanrei.chnotchy.com/es/components/empty-state/) | Un esqueleto promete contenido. | | La carga falló. | Un [callout](https://tanrei.chnotchy.com/es/components/callout/) con el estado de error, en ese mismo lugar. | Un esqueleto que nunca termina es una mentira. | | El contenido ya está ahí, y solo llega tarde su script, su imagen o su fuente. | Ninguno de los cuatro. El componente reserva su propia caja. | Un esqueleto no conoce el tamaño de otro componente. Ese componente sí. | ### Uso Pon el esqueleto donde estará el contenido cuando empiece la espera, y sustitúyelo por el contenido cuando termine. Dale un `label` que diga qué se está cargando. Un marcador de posición es un elemento vacío tuyo con la clase: un `` en cualquier lugar, o un `
` donde es hijo de un bloque, como otro `
`. Dentro de un encabezado o de un párrafo es un ``. **Web** ```html

… ``` **React** ```tsx import { Skeleton } from '@tanrei/react'; import '@tanrei/web/skeleton.css'; {project ? ( ) : ( )} ``` En la web, la hoja de estilos es todo el componente antes de que se ejecute ningún script: las formas, la espera antes de mostrarse, el pulso, la quietud donde el movimiento está reducido y los contornos de los colores forzados. El elemento añade lo que una hoja de estilos no puede: el rol y el nombre para la tecnología de apoyo, mantener fuera del orden del foco lo que el esqueleto contiene, y detenerse mientras no se puede ver. ## Especificaciones - Category: Communication - Level: base - Listing: default - Page: https://tanrei.chnotchy.com/components/skeleton/ - Spec: https://github.com/chnotchy/tanrei/blob/main/specs/skeleton.spec.json ### Availability | Design system | Has it | Notes | | --- | --- | --- | | Tanrei (`tanrei`) | Yes | — | | Cupertino (Apple HIG-inspired) (`cupertino`) | Yes | — | | M3 Expressive-like (Material 3 Expressive-inspired) (`m3-expressive-like`) | Yes | — | | M3-like (Material 3-inspired) (`m3-like`) | Yes | — | ### Platforms - Web: the element ``, registered by importing `@tanrei/web` (or only its own module, `@tanrei/web/components/skeleton`). - React: `Skeleton` from `@tanrei/react`. | Platform | Name | Status | | --- | --- | --- | | Web | `tanrei-skeleton` | lagging | | SwiftUI | `TanreiSkeleton` | planned | | Jetpack Compose | `TanreiSkeleton` | planned | | Flutter | `TanreiSkeleton` | planned | | React Native | `Skeleton` | planned | Names a platform gives in its own idiom: | Spec | Web | SwiftUI | Jetpack Compose | Flutter | React Native | | --- | --- | --- | --- | --- | --- | | `decorative` (prop) | `decorative` | `isDecorative` | `decorative` | `decorative` | `decorative` | Statuses: `planned` — In the inventory. Nothing shippable exists yet. `lagging` — An implementation of an earlier spec exists; it has not caught up with the current one. `alpha` — Implemented with tests. The API may still change. `beta` — Feature complete and at parity. Only fixes are expected. `stable` — Covered by semantic versioning. `deprecated` — Still shipped; scheduled for removal. ### Anatomy - `container`: The region that stands in the content's place: a block as wide as the place it stands in and as tall as what it holds, with no fill, no edge, no padding and no elevation. It is what assistive technology is told about, once, and it carries no state: a skeleton takes no input. - `placeholder`: A quiet filled shape in the place of one piece of the content: one or more lines of text, a block (a picture, a card, a control) or a circle (a person's picture, a round mark). It has the size the content will have and says nothing by itself. ### Props | Prop | Type | Default | Web attribute | Description | | --- | --- | --- | --- | --- | | `label` | `string` | `""` | `label` | What is loading, in the product's language ("Loading projects"): the name assistive technology is given for the whole skeleton, once. Never drawn. Left empty, it reads the product's words; Tanrei ships none of its own. Not read while decorative is true. | | `decorative` | `boolean` | `false` | `decorative` | Whether something else already says this wait: a loading indicator beside it, a status text, a region the product itself exposes as busy and names. True keeps the whole skeleton from assistive technology, so that one wait is said once; it changes nothing that is drawn. | | `showDelay` | `number` | — | `show-delay` | How long, in milliseconds, this skeleton waits from the moment it is inserted before it is drawn and exposed to assistive technology; 0 shows it as it is inserted. Null takes comp.skeleton.motion.show-delay, the system's answer for every skeleton. Set it to 0 where the skeleton is part of the first presentation of a page or a view, which has nothing else to show; leave it where content is fetched in a view that is already there. | ### Item: `placeholder` One shape in the place of one piece of the content: lines of text, a block or a circle. Names: Web `span`, SwiftUI `TanreiSkeletonPlaceholder`, Jetpack Compose `TanreiSkeletonPlaceholder`, Flutter `TanreiSkeletonPlaceholder`, React Native `SkeletonPlaceholder`. | Prop | Type | Default | Description | | --- | --- | --- | --- | | `shape` | `enum`: `text`, `block`, `circle` | `"text"` | What the placeholder stands for. Text is one or more lines of the text style in effect where it stands. Block is a box: a picture, a card, a control, a row. Circle is a round box: a person's picture, a round mark. | | `lines` | `number` | `1` | For text: how many lines the text will take, a whole number of 1 or more. The placeholder is exactly that many line boxes high. Not read for a block or a circle. | | `inlineSize` | `number` | — | The placeholder's size along the line, in points. Null leaves it to the layout: the whole inline size of its place for text and for a block, the side of the square for a circle. A size the product's own layout gives the placeholder (a share of a row, a track of a grid) is used as it is and needs no prop. | | `blockSize` | `number` | — | The placeholder's size across the line, in points: the height of a block, and the side of a circle. Null is one line of the text style in effect, or the size the product's own layout gives. Not read for text, whose height is its lines. | ### States `enabled` ### Accessibility - Role: `progressbar` - Labeling: label is the accessible name of the whole skeleton: what is loading. Once shown, the skeleton is one element — a progressbar with no value, in the platform's busy (indeterminate) state — and its placeholders are hidden; during its show delay, and while decorative is true, it is not exposed at all. It is exposed exactly as a loading indicator is, because it says the same thing: something is loading here. - Minimum target size: yes - Not interactive: the skeleton takes no input and is never focusable (SKL-16, SKL-19), so there is no target of its own to size and minimumTarget holds trivially. - One wait, said once. Every placeholder of a region belongs to one skeleton with one label; a skeleton inside another is silent (SKL-17). Where the same wait is already said — a loading indicator in a status row, a status text, a region the product itself marks busy and names — set decorative, or the wait is read twice. - The skeleton does not announce that it appeared, and does not announce that the content arrived (SKL-16): it is removed with its busy state. Where arrival should be heard (results in answer to a search, a list that was asked for), the product says so through its own live region or the status text of the component that asked; a view that simply opens with its content needs no announcement. - A wait shorter than the show delay shows and exposes nothing (SKL-7): no shapes that flash for a sighted person, and no progressbar that appears and vanishes for a screen-reader user. - Nothing a person should read or use goes inside a skeleton: what it holds is kept from input and from assistive technology (SKL-19). A heading that is already known, a button that already works, stand outside it. - The fill is decoration, held to no contrast ratio: comp.skeleton.placeholder.color is a low-emphasis fill, and in the default system it has the tone of the highest container step, so a placeholder on a surface of that tone is hard to see. The wait is never said by the fill alone: the label says it to assistive technology, and forced colors draw every placeholder as an outline (SKL-20). - Motion: a pulse dims the fill by half and returns in 2 seconds in the default system, far below the three-per-second flash threshold; nothing moves and nothing brightens. Reduced motion stops it entirely (SKL-13): a large region that pulses is more than a small mark that does, and the shapes already say that the place is waiting. - A skeleton that never ends tells a lie. The product replaces it with the content, with an empty state where nothing came, or with a callout of the error status where loading failed, and sets its own limit on the wait; a task that takes many seconds, or whose progress can be measured, is a progress indicator's. - Text size, text spacing and reflow: SKL-21. A text placeholder follows the text style it stands in, so it grows with the reader's text size; a size given in points does not. ### Behaviour Requirements in EARS form, each with its stable id. - **SKL-1** THE skeleton SHALL lay itself out as a block that takes the whole inline size of the place it stands in and is as tall as what it holds: it SHALL lay out the placeholders that stand directly in it in one column, in the order given, each at its own size and at the start edge, comp.skeleton.container.gap apart, and SHALL leave placeholders that stand inside a layout of the product's own (a row, a grid, a card's own structure) to that layout, changing neither their place nor their size. THE skeleton SHALL draw no fill, no edge and no elevation, SHALL bring no padding and no outer space of its own, SHALL set no height of its own and SHALL NOT scroll or clip. - **SKL-2** THE skeleton SHALL draw each placeholder as one box, or for text one box a line, filled with comp.skeleton.placeholder.color, with the corners of its shape (comp.skeleton.placeholder.shape.text for each line of text, comp.skeleton.placeholder.shape.block for a block, comp.skeleton.placeholder.shape.circle for a circle), never larger than half the box's smaller side, and with no edge, no elevation, no shadow and nothing inside it. THE skeleton SHALL draw nothing else: no glyph, no mark, no text, and never its label. - **SKL-3** WHILE a placeholder's shape is text THE skeleton SHALL size it by the text style in effect where it stands — the style text placed there would be drawn in, and sys.typescale.body where the platform has no such style and the product gave none: the placeholder SHALL be exactly as tall as lines line boxes of that style, and in each line box THE skeleton SHALL draw one bar as tall as the style's font size, centred in the line box. Each bar SHALL be as long as the placeholder's inline size (inlineSize, else the whole inline size of its place), except that WHILE lines is 2 or more the last bar SHALL be comp.skeleton.placeholder.last-line-inline-size of that size, from the start edge. The placeholder SHALL NOT read blockSize. - **SKL-4** WHILE a placeholder's shape is block THE skeleton SHALL draw one box whose inline size is inlineSize, else the size the product's layout gives it, else the whole inline size of its place, and whose block size is blockSize, else the size the product's layout gives it (a stretched cell, a ratio the product set), else one line box of the text style in effect where it stands (SKL-3). The block SHALL NOT read lines. - **SKL-5** WHILE a placeholder's shape is circle THE skeleton SHALL draw one square box whose side is blockSize, else inlineSize, else the size the product's layout gives it, else one line box of the text style in effect where it stands (SKL-3), and SHALL draw it round. WHERE the place is narrower than the side THE skeleton SHALL make the square as large as the place allows and keep it square: a circle is never drawn as an oval. The circle SHALL NOT read lines. - **SKL-6** THE skeleton SHALL keep the box of every placeholder, and so its own, unchanged from the moment it is inserted to the moment it is removed — while it waits to be shown (SKL-7), while it is shown and while it stirs (SKL-12) — and SHALL NOT guess what is coming: it draws the placeholders the product gave, in the sizes the product gave, and nothing of the content. That the content takes the box its placeholders held is the product's to arrange, by placing each placeholder where its content will be and as that content will be placed. - **SKL-7** WHEN the skeleton is inserted into a view THE skeleton SHALL wait for its show delay (SKL-9) before it is shown, and WHILE it waits SHALL draw nothing, SHALL run no animation, SHALL be absent from the accessibility tree (no role, no name, no busy state), and SHALL still take the box it takes when shown (SKL-1 to SKL-5), so that nothing around it moves when it appears; a show delay of 0 SHALL show it as it is inserted. - **SKL-8** WHEN its show delay ends THE skeleton SHALL be shown: it SHALL draw its placeholders at once, at their resting opacity and without an entrance of their own, expose itself as SKL-15 says without announcing itself (SKL-16), and start the animation of SKL-12 at the beginning of a pulse. - **SKL-9** THE skeleton SHALL take its show delay from showDelay, a number of milliseconds used as given (the motion dial does not scale it). WHILE showDelay is null THE skeleton SHALL use comp.skeleton.motion.show-delay in its place; IF showDelay is negative or not a finite number THE skeleton SHALL use the token likewise and in debug builds report the value it ignored. - **SKL-10** THE skeleton SHALL treat its show delay as a waiting time, not motion: WHERE motion is reduced it SHALL keep it, on every platform, including one whose reduced-motion setting removes every animation; and it SHALL keep counting it while the skeleton cannot be seen (scrolled out of view, in a hidden view), because the delay measures the wait, not what is seen. - **SKL-11** WHEN the skeleton is removed before its show delay ends THE skeleton SHALL have drawn, exposed and announced nothing, and WHEN it is removed while shown it SHALL disappear at once, without a motion of its own: how the content enters is the content's. WHEN it is inserted again THE skeleton SHALL wait its whole show delay again; hiding it without removing it (a hidden ancestor, scrolling) SHALL neither restart nor pause the delay (SKL-10). WHEN showDelay changes while the delay is running THE skeleton SHALL finish the running delay as it started and use the new value from its next insertion. - **SKL-12** WHILE the skeleton is shown THE skeleton SHALL stir as comp.skeleton.motion.animation names, without end. pulse SHALL ease the opacity of every placeholder's fill from its resting value to comp.skeleton.placeholder.dim-opacity of it over comp.skeleton.motion.dim-duration with comp.skeleton.motion.dim-easing and back over the same time on the same curve, every placeholder of the skeleton in step with the others. wave SHALL put each point of each placeholder through the same fall and return, each point later than the skeleton's start edge by a share of one whole pulse equal to its distance from that edge over the skeleton's inline size, so that one dimmer band travels from the start edge to the end edge through all the placeholders as through one surface. none SHALL leave the placeholders still at their resting opacity. In every manner THE skeleton SHALL change the fill's opacity only: no box moves, grows or changes shape, and nothing brighter than the resting fill is drawn. - **SKL-13** WHERE reduced motion is requested THE skeleton SHALL NOT stir, whatever comp.skeleton.motion.animation names: it SHALL draw its placeholders still, at their resting opacity. The shapes, the label and the busy state still say that the place is waiting, and the show delay is kept (SKL-10). - **SKL-14** WHILE the skeleton is not visible (scrolled out of view, in a hidden view, or in an app in the background) THE skeleton SHALL NOT run its animation, and SHALL resume it when it becomes visible. - **SKL-15** WHILE the skeleton is shown and decorative is false THE skeleton SHALL expose itself to assistive technology as one element: the progressbar role with label as its name, no current value, and the platform's busy or indeterminate state. THE skeleton SHALL expose nothing of what it holds: no placeholder, no count of placeholders or of lines, and nothing of a layout the product placed in it. - **SKL-16** THE skeleton SHALL NOT be focusable and SHALL NOT be a stop in the focus order, SHALL NOT announce itself when it is shown, when it changes or when it is removed, and SHALL NOT move keyboard or screen-reader focus. Saying that the content has arrived, where the product wants it said, is the product's, as it is beside a loading indicator. - **SKL-17** WHILE decorative is true THE skeleton SHALL keep itself and everything it holds from assistive technology — no role, no name, no busy state — and SHALL draw, wait and stir as it otherwise would. A skeleton that stands inside another skeleton SHALL behave as decorative whatever its prop says: one wait is said once. - **SKL-18** THE skeleton SHALL take its name from label, and WHILE label is empty from the product's words (the key loadingLabel); it has no words of its own in any language. WHILE both are empty and decorative is false THE skeleton SHALL still be drawn and still be exposed as SKL-15 says, without a name, and in debug builds report once that a skeleton has no label, naming the prop. - **SKL-19** THE skeleton SHALL NOT take pointer, touch or keyboard input and SHALL NOT change anything it draws under a pointer, a press or focus: it has no hovered, focused, pressed, selected or disabled state and draws no state layer and no focus indicator. Whatever the product places in it besides placeholders SHALL be drawn as given, SHALL take no input and no focus, and SHALL NOT be exposed to assistive technology: a skeleton holds the shape of content, never content. - **SKL-20** WHERE the platform draws with a person's own forced colors (the web's forced-colors mode, and a platform's equivalent where it has one) THE skeleton SHALL draw each placeholder, and each line of a text placeholder, as the outline of its shape, sys.border.hairline wide and inside its box, in the platform's text color, with no fill, and SHALL NOT stir: a fill is not drawn in that mode, and a placeholder that vanished would leave a blank place that says nothing. - **SKL-21** WHILE the text size is enlarged THE skeleton SHALL grow its text placeholders with the text style they stand in, and every placeholder whose size is a line box with them, so that the skeleton still holds the box the enlarged content will take; it SHALL keep a size given as inlineSize or blockSize as given, SHALL never draw a placeholder wider than its place, SHALL keep its gap, and SHALL need no horizontal scrolling at a width of 320 points with text at 200 %. - **SKL-22** WHERE the layout direction is right-to-left THE skeleton SHALL place its placeholders at the right edge, begin the shortened last bar of a text placeholder (SKL-3) and every placeholder narrower than its place at the right, and run a wave from the right edge to the left; a block and a circle are otherwise drawn as they are in a left-to-right layout. - **SKL-23** THE skeleton SHALL take its layout direction from where it is used — the direction of the nearest ancestor that sets one, and the platform's own where none does — and SHALL have no direction setting of its own; WHEN that direction changes while the skeleton is shown THE skeleton SHALL draw itself for the new direction at once, without a motion of its own, keeping its place in its animation. - **SKL-24** WHEN label, decorative or a placeholder's shape, lines, inlineSize or blockSize changes, or a placeholder is added or removed, while the skeleton waits or is shown THE skeleton SHALL draw and expose the new value at once, without a motion, without an announcement, and without restarting its show delay or its animation. THE skeleton SHALL neither show nor hide itself and SHALL NOT know when the content arrives: the product puts the skeleton in the content's place when the wait starts and takes it away when the wait ends, whatever the wait ends in. - **SKL-25** WHEN a placeholder's shape names a value this spec does not have THE skeleton SHALL draw it as text; IF its lines is less than 1 or not a finite number THE skeleton SHALL use 1, and SHALL use the whole number below a lines that is not whole; IF its inlineSize or blockSize is negative or not a finite number THE skeleton SHALL treat it as null; WHEN comp.skeleton.motion.animation names a manner the skeleton does not know THE skeleton SHALL pulse. In each case it SHALL report the value it ignored in debug builds. - **SKL-26** IF the skeleton holds no placeholder THE skeleton SHALL draw nothing, take no space and expose nothing, and in debug builds report that a skeleton holds no placeholder: a busy region with no shape in it is a blank place, and a wait whose shape is not known is a loading indicator's. ### Tokens As written in the token documents (DTCG): an alias in braces names the token it takes its value from, which each design system resolves. On the web each token is a CSS custom property: `--tanrei` and the name after `tanrei`, joined by hyphens (`tanrei.comp.skeleton.…` → `--tanrei-comp-skeleton-…`). #### `tanrei.comp.skeleton` | Token | Type | Value | | --- | --- | --- | | `comp.skeleton.container.gap` | `dimension` | `{tanrei.sys.space.space100}` | | `comp.skeleton.placeholder.color` | `color` | `{tanrei.sys.color.surface-variant}` | | `comp.skeleton.placeholder.shape.text` | `dimension` | `{tanrei.sys.shape.corner.extra-small}` | | `comp.skeleton.placeholder.shape.block` | `dimension` | `{tanrei.sys.shape.corner.medium}` | | `comp.skeleton.placeholder.shape.circle` | `dimension` | `{tanrei.sys.shape.corner.full}` | | `comp.skeleton.placeholder.last-line-inline-size` | `number` | `0.6` | | `comp.skeleton.placeholder.dim-opacity` | `number` | `0.5` | | `comp.skeleton.motion.animation` | `number` | `0` | | `comp.skeleton.motion.dim-duration` | `duration` | `{tanrei.sys.motion.duration.extra-long4}` | | `comp.skeleton.motion.dim-easing` | `cubicBezier` | `{tanrei.sys.motion.easing.standard}` | | `comp.skeleton.motion.show-delay` | `duration` | `{tanrei.sys.motion.role.show-delay}` | ## Pautas ### El esqueleto reserva la caja Lo que importa de un esqueleto es que nada se mueve. Su caja, y la de cada marcador de posición, es la misma desde el momento en que se inserta hasta el momento en que se quita: mientras espera para mostrarse, cuando aparece y mientras se anima. El esqueleto no adivina nada. Dibuja los marcadores de posición que le diste, con los tamaños que les diste. Que el contenido ocupe la caja que reservaron sus marcadores de posición depende de ti: pon cada marcador donde estará su contenido, colocado como estará colocado ese contenido. - Un marcador de posición de texto va dentro del encabezado, el párrafo o la celda donde estará el texto. Toma ese estilo de texto y es exactamente tan alto como ese número de líneas, también cuando quien lee amplía el texto. - Di cuántas líneas ocupará el texto con `data-lines`. Acertarás tanto como regular sea tu contenido. Un esqueleto al que le falta una línea mueve la página una línea, que sigue siendo menos de lo que la mueve un hueco en blanco. - Da a un bloque el tamaño de la imagen o del control: un número, una proporción o el tamaño que le da tu diseño. Un círculo recibe un solo número, su lado. ### Formas | `data-shape` | Ocupa el lugar de | Su tamaño | | --- | --- | --- | | `text` (predeterminado) | Una o más líneas de texto. | `data-lines` cajas de línea del estilo de texto en el que está. Cada línea es una barra tan alta como el tamaño de la fuente. La última de varias líneas es más corta, porque un párrafo rara vez termina en el borde. `inline-size` define la longitud de las barras. | | `block` | Una imagen, una tarjeta, un control, una fila. | `inline-size` y `block-size`, o el tamaño que le da tu diseño: una celda estirada, un `aspect-ratio`. Sin tamaño, es tan ancho como su lugar y tiene una línea de alto. | | `circle` | La foto de una persona, una marca redonda. | Un lado: `block-size` o `inline-size`. Sin tamaño, tiene una línea de alto. | Los marcadores de posición que son hijos directos del esqueleto se apilan uno debajo de otro, con una separación de 8. Cualquier otra cosa (un círculo junto a dos líneas, una cuadrícula de tarjetas) es tu propio diseño dentro del esqueleto. No hay esqueletos de tarjeta ni de lista ya hechos: tus pantallas son tuyas, y solo tú las conoces. En una fila tuya, un marcador de posición de texto o un bloque necesita que esa fila le dé una anchura, como la necesitará el contenido: `flex: 1`, una pista de una cuadrícula o un `inline-size`. ### Una espera, una señal Pon todos los marcadores de posición de una región en un solo esqueleto, con un solo `label`. Un esqueleto dentro de otro esqueleto no dice nada. Donde otra cosa ya dice la misma espera (un indicador de carga en una línea de estado, un texto de estado, una región que tú marcas como ocupada y a la que das nombre), define `decorative`. El esqueleto se dibuja igual y queda oculto para la tecnología de apoyo, de modo que la espera no se lee dos veces. ### Espera antes de mostrarse Desde el momento en que se inserta, un esqueleto espera 300 ms antes de dibujarse y exponerse, con su caja ya reservada. Una espera que termina antes muestra un hueco que tenía el tamaño correcto desde el principio. - Inserta el esqueleto cuando empiece la espera y quítalo cuando llegue el contenido. El retardo cuenta desde la inserción. Ocultar el esqueleto no lo reinicia. - Define `show-delay="0"` donde el esqueleto forma parte de la primera presentación de una página o de una vista, que no tiene nada más que mostrar. - El retardo es una espera, no movimiento: se conserva donde el movimiento está reducido. ### Siempre termina en algo Sustituye el esqueleto por el contenido, por un [estado vacío](https://tanrei.chnotchy.com/es/components/empty-state/) donde no llegó nada, o por un [callout](https://tanrei.chnotchy.com/es/components/callout/) con el estado de error donde la carga falló. Nunca caduca por sí solo: cuándo darse por vencido lo sabes tú. El esqueleto no anuncia que el contenido ha llegado. Donde la llegada deba oírse (los resultados que responden a una búsqueda, una lista que se pidió), dilo con tu propia región activa o con el texto de estado del componente que lo pidió. Una vista que simplemente se abre con su contenido no necesita ningún anuncio. ### Movimiento De forma predeterminada, los marcadores de posición muestran un pulso: el relleno se atenúa hasta la mitad y vuelve, en todos a la vez, con un pulso cada dos segundos. Solo cambia la opacidad. Nada se mueve, y nada se dibuja más brillante que el relleno en reposo. Un sistema de diseño puede elegir otra manera para todos sus esqueletos con el token `comp.skeleton.motion.animation`: `pulse`, `wave` (la misma atenuación, que recorre todo el esqueleto de su borde de inicio a su borde de fin como una sola banda) o `none`. No hay ningún ajuste para una sola instancia. Donde el movimiento está reducido, los marcadores de posición se quedan quietos. Las formas, la etiqueta y el estado ocupado ya dicen que el lugar está esperando. Mientras el esqueleto no se puede ver, su animación no se ejecuta. ### En la web, antes del script Un esqueleto es lo que una página muestra antes de que se haya ejecutado su script, así que `@tanrei/web/skeleton.css` lo dibuja entero sin el elemento. Unas pocas cosas necesitan el elemento, y son distintas hasta que este se define o donde nunca se ejecuta ningún script: - El rol y el nombre. Una página que debe ser correcta antes de que se ejecute su script escribe `role="progressbar"`, `aria-busy="true"` y `aria-label` en el propio elemento, y el elemento deja lo que encuentra. - Un `show-delay` distinto de `0`. La hoja de estilos espera el retardo del sistema de diseño. - Más de 24 líneas en un solo marcador de posición de texto. - La manera `wave`, que se dibuja como un pulso. - Un esqueleto dentro de una vista que no se muestra empieza su espera cuando la vista se muestra. Donde nunca se ejecuta ningún script, un esqueleto no termina nunca salvo que el servidor lo sustituya. Un contenido que solo llega mediante un script necesita un `