Text Shell
Text Shell component is useful when you want to show a loading indicator while fetching text data from the server.
Last updated
Was this helpful?
Text Shell component is useful when you want to show a loading indicator while fetching text data from the server.
Last updated
Was this helpful?
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).
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.