Text Shell

The <app-text-shell> basically works by wrapping the text node with a loading indicator while you are fetching data.

While there are empty values the component adds some 'loading' styles and animations.

You can reset the 'loading' state by re-assigning the data to the empty/null value.

Empty data will cause the shell to never quit its 'loading' state.

The <app-text-shell> element can be used alone or wrapped with a text tag (h1, h2, h3, p, etc).

In case you wrap it with a heading element, we included basic styles (src/theme/shell-defaults.scss) to match the different heading styles (mainly line-height associated to each heading).

:root {
  h1 > app-text-shell {
    --text-shell-line-height: 32px;
    --text-shell-line-color: #CCC;
  }
}

By matching the line-height of the text-shell with the line-height of the wrapper element, we avoid page height bumps after the data gets loaded into the shells.