Support RTL animation

[saadaouad]

First of all I'd like to thank you for this great package,

Right now there is no support for RTL skeleton animation, is there a way to add a direction (direction: string, Defaults to ltr) or rtl (rtl: boolean Defaults to false) prop on SkeletonTheme component to deal with that?

Happy to help on that!

[dvtng]

I'd love to support this. I wonder if detecting that the document is using RTL and changing the animation direction automatically would work? E.g. by using https://developer.mozilla.org/en-US/docs/Web/CSS/:dir

[saadaouad]

It will change only the element direction and not the animation

[saadaouad]

Since are you using animation CSS property, the only way to change the animation direction is to use animation-direction property.

Right now we can set that only on Skeleton component using className/style properties which will be repetitive if you are using many Skeleton components.

A better way to deal with that in my opinion is to set a new property (direction) on SkeletonTheme component and change the animation-direction value from normal to reverse according to direction value (rtl/ltr).

[dvtng]

Ah sorry I didn't explain my idea well. I meant that we can modify the library so that it already comes with CSS that detects if a skeleton is in a rtl document (or section), and if so apply animation-direction: reverse by itself. This would maintain the ethos that the skeleton should automatically adapt to the contents of your page, rather than having to manually specify the direction in some another way. It seems that the :dir pseudo-selector I mentioned earlier has limited browser support, but if your page is using the dir HTML attribute then we could still make the idea work.

[saadaouad]

I opened a PR for it @dvtng #78, hopefully it will work

[jaril5976]

Hello @saadaouad @dvtng last open PR looks good to me, please merge it and issue will be fixed, we are waiting for rtl props to skeletontheme, Thanks!!

[jaril5976]

I had fixed this issue with this

${({theme:{isRTL}}) => isRTL && css`
    .react-loading-skeleton {
      animation-direction: reverse;
    }
  `}