Text Shell

Text Shell component is useful when you want to show a loading indicator while fetching text data from the server.

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.

See the live Showcase to learn how to use and customize the Text Shell. There are lots of examples to help you using this component.