Support for reduced motion (#165)

* Support for reduced motion

* Update src/__stories__/Skeleton.stories.tsx

Co-authored-by: Sam Magura <[email protected]>

* Update src/__stories__/Skeleton.stories.tsx

Co-authored-by: Sam Magura <[email protected]>

* Update src/skeleton.css

Co-authored-by: Sam Magura <[email protected]>

---------

Co-authored-by: Sam Magura <[email protected]>

Author: RoseMagura

src/__stories__/Skeleton.stories.tsx

@@ -394,3 +394,15 @@ export const RegressionTest133 = () => (
         </div>
     </div>
 )
+
+export const PrefersReducedMotion = () => (
+    <div>
+        <p>With prefers-reduced-motion, this skeleton should not be animated.</p>
+        <Skeleton
+            circle
+            baseColor="lavender"
+            highlightColor="#E0B0FF"
+            style={{ display: 'block', width: 200, height: 200 }}
+        />
+    </div>
+)

src/skeleton.css

@@ -46,3 +46,9 @@
     animation-timing-function: ease-in-out;
     animation-iteration-count: infinite;
 }
+
+@media (prefers-reduced-motion) {
+    .react-loading-skeleton {
+        --pseudo-element-display: none; /* Disable animation */
+    }
+}