I wanted to be able to load a grid and display a placeholder like on linkedin. I found a css that would create display and then found was to show then hide within the additional HTML header of grid.  A javascript call is made on dataload to hide the loader and display the header as well as grid.  The make easier to use the code was placed into token which were customized to be placed on multiple grids on same page.  Custom CSS was added to settings of grid to then allow hide then show of header.

PLace the following in the siteheader or custom css file
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/css-skeletons@1.0.3/css/css-skeletons.min.css" />
<style>
.hide{
display:none;
}
.displayheader > .header-container {
    display:none;
}
.skeleton-card-3
--c-s Default 50px
--g-gap Default 30px
--f-l-w Default 200px
--f-l-h Default 20px
--s-l-w Default 130px
--s-l-h Default 10px
--s-l-m-t Default 10px
--l-h Default 10px
--l-gap
--lines Default 3
--c-w Default 100%
</style>

Tokens (constant tokens)

[Skin:GridSkeleton(Name="value")]
<div class="[If:DisplayIfNotEmpty(Condition='[TknParams:Name]', DisplayText="[TknParams:Name]_", DefaultValue='')]grid_skeleton"><div class="skeleton skeleton-card-3"></div><div class="skeleton skeleton-card-3"></div></div>

[Skin:GridSkeletonJS(Name="value")]
document.querySelector(".[If:DisplayIfNotEmpty(Condition='[TknParams:Name=""]', DisplayText="[TknParams:Name]_", DefaultValue='')]grid_skeleton").classList.add("hide");
document.querySelector(".[If:DisplayIfNotEmpty(Condition='[TknParams:Name=""]', DisplayText="[TknParams:Name]_", DefaultValue='')]grid_skeleton_header").classList.remove("displayheader");

[Skin:GridSkeleton(Name="value")] is placed in addition html header in advanced in settings
[Skin:GridSkeletonJS(Name="value")] is placed in on dataload / reload in advanced in settings

change value to a name for the grid eg test

in the custom css section of settings add 
test_grid_skeleton_header displayheader (where test is what as used with tokens)