Glow effect when loading page

[carlos-verdes]

I would like to have a feature like this from bootstrap:
https://getbootstrap.com/docs/5.3/components/placeholders/

When the content is being fetched we show a glow effect where the content will be placed:

Once the content is loaded we remove this effect and show the real content (text, picture, etc):

[ouvreboite]

Semantic

Looking at the role/aria attributes that could represent that, I see:

aria-busy

🔴 Already used in PicoCSS for the loading spinner

You could use that to represent part of your UI being loaded (with the spinner)

aria-hidden (spec)

The aria-hidden attribute can be used to hide non-interactive content from the accessibility API.

🟢 Not used in PicoCSS at the moment.

Looking at it, i think a "placeholder" should be marked as aria-hidden (you should not interact with it), but I'm not sure it would be semantically valid to use aria-hidden as a way to declare placeholders. Maybe a dedicated class would be better?

Looking at boostrap

Bootstrap also use aria-hidden on the top level element and they requires to put the "placeholder" class on individual elements (not the structural ones, like the card).
To display "chunks of text placeholder", the requires manually created span with custom width (col-6, col-7, ...) to represent each chunk. I don't think pico should support this pattern.

<div class="card" aria-hidden="true">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title placeholder-glow">
      <span class="placeholder col-6"></span>
    </h5>
    <p class="card-text placeholder-glow">
      <span class="placeholder col-7"></span>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-4"></span>
      <span class="placeholder col-6"></span>
      <span class="placeholder col-8"></span>
    </p>
    <a class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
  </div>
</div>

Basic example with aria-hidden

<article aria-hidden="true"> <!-- aria-hidden -->
    <header>
        <hgroup>
            <h1>Header</h1>
            <small>Subheader</small>
        </hgroup>
    </header>
    <img style="width: 100%; height: 200px; object-fit:cover" /> <!-- no src -->
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quasi quaerat quis modi numquam facilis
        nulla iste placeat. Voluptate soluta tempora dignissimos nisi dolor accusamus, dolores est
        blanditiis saepe vero aliquid!
    </p>
    <select>
        <option>Option 1</option>
    </select>
    <footer>
        <button>OK</button>
    </footer>
</article>

@keyframes shine {
    0% { background-color: #c5c5c5; }
    100% { background-color: #dcdcdc; }
}

[aria-hidden="true"],
[aria-hidden="true"] * {
    /* prevent interactions */
    pointer-events: none;
    user-select: none;
}

p[aria-hidden="true"],
h1[aria-hidden="true"],
/* other text elements, inputs, img, ... */
[aria-hidden="true"] p,
[aria-hidden="true"] h1,
/* other text elements, inputs, img, ... */ {
    background-color: #c5c5c5;
    animation: shine 1s infinite alternate-reverse;
    border-color: transparent;
    color: transparent;
}

[carlos-verdes]

Thanks for the answer, impressive!