Only use loading placeholders with loading skeletons
To keep in mind
Indicate the shape of content to arrive in a loading skeleton.
Loading placeholders follow the shape and form of what will be loaded – the width, height, colors and text line-heights align to the built components.
Assuming the content will instantly load without a page reload, animate the loading placeholder’s opacity.
If the skeleton loading will load in content when it’s ready without refreshing the page, animate the loading placeholders. We don’t currently use gradients in our branding aesthetic, so for ‘shimmering’ skeletons we opt for opacity changes rather than animated gradients.