RFC: skeleton inside i18n translations

[florian-sanders-cc]

Context

Currently, our skeleton class is meant to be used directly on the element that you want to put in skeleton mode.

Imagine a translated sentence, where you want to only put a few parts (the dynamic ones) in skeleton.
A good example of that is the cc-invoice-list in mobile

In skeleton, the whole sentence is animated instead of only the specific words.
We also rely on the fact that the translation uses <strong> or <code> to set the background of the dynamic parts:

        .invoice-list .skeleton code,
        .invoice-list .skeleton strong {
          background-color: #bbb;
          color: transparent;
        }

This is not very robust and is very specific to the cc-invoice-list case. We are "lucky" that we don't need to use <strong> in that sentence for a static non skeleton part.

How to do better?

For the moment I see two options but there are probably other / better solutions.

Allow using class attribute in translations

At the moment, class attributes added inside i18n properties are automatically stripped off by i18n-sanitize.
We could change this behavior and allow class attributes to be used within i18n properties.

This would allow translations like these:

// translation file
'cc-toto-component.text': ({ data, skeleton }) => sanitize`
  <p>toto <span ${skeleton ? 'class="skeleton"' : ''}>data</span>
`,

• Pros:
  • it's very straightforward and easy to understand
• Cons:
  • brings more JS logic to translation strings which is something we tend to limit as much as possible,
  • opens the door to using classes freely inside i18n strings which can become a mess (it's always weird to define a class inside a component CSS, not find the class within the component render itself. People might think this class is unused).

Add a new skeleton class

We could add a new skeleton class to be used on the parent of i18n nodes and allow a specific attribute to be used inside i18n strings.

For instance:

// component file
<div class="classMap({ 'i18n-skeleton': this.state.type === 'loading' })">
  ${i18n('cc-toto-component.text', { data })}
</div>

// translation file
'cc-toto-component.text': ({ data, skeleton }) => sanitize`
  <p>toto <span data-i18n-skeleton-item>data</span></p>
`,

  // skeleton.js file aka `skeletonStyles`
  .skeleton,
  .i18n-skeleton [data-i18n-skeleton-item] {
    animation-direction: alternate;
    animation-duration: 500ms;
    animation-iteration-count: infinite;
    animation-name: skeleton-pulse;
    animation-play-state: var(--cc-skeleton-state, running);
    color: transparent;
    cursor: progress;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

• Pros:
  • a lot more specific / targeted than the previous solution,
• Cons:
  • just like most CSS only solutions, the API is not obvious and not easy to document.

Related issues

• cc-invoice-table: fix "mobile" screen size skeleton #1158

[pdesoyres-cc]

Maybe we could have a new <cc-skeleton> component that would be authorized by the i18n function.

[roberttran-cc]

I think I like the second solution best ("Add a new skeleton class").

The <cc-skeleton> component could be nice but if it does not add much value comparing to a HTML/CSS implementation, I'll often go without the component.