Clean up & test new animation (#114)

Author: srmagura

src/Skeleton.tsx

@@ -3,10 +3,6 @@ import React, { CSSProperties, ReactElement } from 'react'
 import { SkeletonThemeContext } from './SkeletonThemeContext'
 import { SkeletonStyleProps } from './SkeletonStyleProps'
 
-// If either color is changed, skeleton.css must be updated as well
-const defaultBaseColor = '#ebebeb'
-const defaultHighlightColor = '#f5f5f5'
-
 const defaultEnableAnimation = true
 
 // For performance & cleanliness, don't add any inline styles unless we have to
@@ -26,8 +22,8 @@ function styleOptionsToCssProperties({
     const style: CSSProperties & Record<`--${string}`, string> = {}
 
     if (direction === 'rtl') style['--animation-direction'] = 'reverse'
-
     if (typeof duration === 'number') style['--animation-duration'] = `${duration}s`
+    if (!enableAnimation) style.backgroundImage = 'none'
 
     if (typeof width === 'string' || typeof width === 'number') style.width = width
     if (typeof height === 'string' || typeof height === 'number') style.height = height
@@ -37,12 +33,8 @@ function styleOptionsToCssProperties({
 
     if (circle) style.borderRadius = '50%'
 
-    if (typeof baseColor !== 'undefined' || typeof highlightColor !== 'undefined') {
-        style['--base-color'] = baseColor ?? defaultBaseColor;
-        style['--highlight-color'] = highlightColor ?? defaultHighlightColor;
-    }
-
-    if (!enableAnimation) style.backgroundImage = 'none'
+    if (typeof baseColor !== 'undefined') style['--base-color'] = baseColor
+    if (typeof highlightColor !== 'undefined') style['--highlight-color'] = highlightColor
 
     return style
 }

src/__stories__/Skeleton.stories.tsx

@@ -30,6 +30,12 @@ export const Inline: React.VFC = () => (
     </SideBySide>
 )
 
+export const InlineWithText: React.VFC = () => (
+    <div>
+        Some random text <Skeleton width={150} inline /> Some more random text
+    </div>
+)
+
 export const BlockWrapper: React.VFC = () => (
     <SideBySide>
         <Skeleton count={5} wrapper={Box} />
@@ -51,13 +57,12 @@ export const InlineWrapper: React.VFC = () => (
         <SideBySide>
             <div>
                 {[0, 1, 2, 3].map((i) => (
-                    <div>
+                    <div key={i}>
                         <Skeleton
                             count={4}
                             width={75}
                             inline
                             wrapper={InlineWrapperWithMargin}
-                            key={i}
                         />
                     </div>
                 ))}
@@ -73,7 +78,7 @@ export const InlineWrapper: React.VFC = () => (
 )
 
 export const DifferentDurations: React.VFC = () => (
-    <div>
+    <div style={{ width: 500 }}>
         <Skeleton duration={1} />
         <Skeleton duration={2} />
         <Skeleton duration={3} />
@@ -107,6 +112,7 @@ export const CustomStyles: React.VFC = () => (
 
 export const Circle: React.VFC = () => <Skeleton height={50} width={50} circle />
 
+// Use https://bennettfeely.com/clippy/ to try out other shapes
 const StarWrapper: React.FC = ({ children }) => (
     <div
         style={{
@@ -121,7 +127,6 @@ const StarWrapper: React.FC = ({ children }) => (
     </div>
 )
 
-// Use https://bennettfeely.com/clippy/ to try out other shapes
 export const Stars: React.VFC = () => (
     <Skeleton
         height="100%"

src/skeleton.css

@@ -5,7 +5,6 @@
 }
 
 .react-loading-skeleton {
-    /* If either color is changed, Skeleton.tsx must be updated as well */
     --base-color: #ebebeb;
     --highlight-color: #f5f5f5;
     --animation-duration: 1.5s;