feat(svg): add an interval prop (#139)

* feat(svg): add an interval prop

Add an interval prop that controls the duration of the interval between two animations. For
instance, an interval of `.25` and an animation speed of `2` imply that the animation will
take 1.5s to complete, and wait 0.5s before starting again.

* docs(options): add interval prop

Author: alexkirsz

README.md

@@ -78,6 +78,10 @@ Defaults to `Loading interface...`. It's used to describe what element it is. Us
 
 Defaults to `2`. Animation speed in seconds.
 
+**`interval?: number`**
+
+Defaults to `0.25`. Interval of time between runs of the animation, as a fraction of the animation speed.
+
 **`className? string`**
 
 Defaults to an empty string. The classname will be set in the `<svg />` element.

docs/intro.mdx

@@ -73,6 +73,10 @@ Defaults to `Loading interface...`. It's used to describe what element it is. Us
 
 Defaults to `2`. Animation speed in seconds.
 
+**`interval?: number`**
+
+Defaults to `0.25`. Interval of time between runs of the animation, as a fraction of the animation speed.
+
 **`className? string`**
 
 Defaults to an empty string. The classname will be set in the `<svg />` element.

docs/usage.mdx

@@ -55,7 +55,8 @@ import FacebookStyle from '../src/stylized/FacebookStyle'
 <Playground>
   <ContentLoader
     height={140}
-    speed={1}
+    speed={2}
+    interval={0.5}
     primaryColor={'#333'}
     secondaryColor={'#999'}
   >

package.json

@@ -57,8 +57,8 @@
     "babel-jest": "^23.6.0",
     "commitizen": "^3.0.5",
     "cz-conventional-changelog": "^2.1.0",
-    "docz": "^0.12.13",
-    "docz-theme-default": "^0.12.13",
+    "docz": "^0.13.7",
+    "docz-theme-default": "^0.13.7",
     "husky": "^1.1.2",
     "jest": "^23.6.0",
     "prettier": "^1.15.3",

src/Holder.tsx

@@ -7,6 +7,7 @@ export const defaultProps: IContentLoaderProps = {
   animate: true,
   ariaLabel: 'Loading interface...',
   height: 130,
+  interval: 0.25,
   preserveAspectRatio: 'none',
   primaryColor: '#f0f0f0',
   primaryOpacity: 1,

src/Svg.tsx

@@ -6,6 +6,7 @@ import uid from './uid'
 export default ({
   rtl,
   speed,
+  interval,
   style,
   width,
   height,
@@ -24,6 +25,8 @@ export default ({
   const idClip = uniquekey ? `${uniquekey}-idClip` : uid()
   const idGradient = uniquekey ? `${uniquekey}-idGradient` : uid()
   const rtlStyle = rtl ? { transform: 'scaleX(-1)' } : {}
+  const keyTimes = `0; ${interval}; 1`
+  const dur = `${speed}s`
 
   return (
     <svg
@@ -57,8 +60,9 @@ export default ({
             {animate && (
               <animate
                 attributeName="offset"
-                values="-3; 1"
-                dur={`${speed}s`}
+                values={`-2; -2; 1`}
+                keyTimes={keyTimes}
+                dur={dur}
                 repeatCount="indefinite"
               />
             )}
@@ -72,8 +76,9 @@ export default ({
             {animate && (
               <animate
                 attributeName="offset"
-                values="-2; 2"
-                dur={`${speed}s`}
+                values={`-1; -1; 2`}
+                keyTimes={keyTimes}
+                dur={dur}
                 repeatCount="indefinite"
               />
             )}
@@ -87,8 +92,9 @@ export default ({
             {animate && (
               <animate
                 attributeName="offset"
-                values="-1; 3"
-                dur={`${speed}s`}
+                values={`0; 0; 3`}
+                keyTimes={keyTimes}
+                dur={dur}
                 repeatCount="indefinite"
               />
             )}

src/__tests__/Holder.tests.tsx

@@ -32,6 +32,7 @@ describe('Holder', () => {
       <ContentLoader
         rtl
         speed={10}
+        interval={0.5}
         width={200}
         height={200}
         animate={false}
@@ -58,6 +59,15 @@ describe('Holder', () => {
       expect(propsFromFullfield.speed).toBe(10)
     })
 
+    it("`interval` is a number and it's used", () => {
+      // defaultProps
+      expect(typeof propsFromEmpty.interval).toBe('number')
+      expect(propsFromEmpty.interval).toBe(0.25)
+      // custom props
+      expect(typeof propsFromFullfield.interval).toBe('number')
+      expect(propsFromFullfield.interval).toBe(0.5)
+    })
+
     it("`height` is a number and it's used", () => {
       // defaultProps
       expect(typeof propsFromEmpty.height).toBe('number')

src/__tests__/stylized/__snapshots__/BulletListStyle.test.tsx.snap

@@ -91,8 +91,9 @@ exports[`BulletListStyle renders correctly 1`] = `
         <animate
           attributeName="offset"
           dur="20s"
+          keyTimes="0; 0.25; 1"
           repeatCount="indefinite"
-          values="-3; 1"
+          values="-2; -2; 1"
         />
       </stop>
       <stop
@@ -103,8 +104,9 @@ exports[`BulletListStyle renders correctly 1`] = `
         <animate
           attributeName="offset"
           dur="20s"
+          keyTimes="0; 0.25; 1"
           repeatCount="indefinite"
-          values="-2; 2"
+          values="-1; -1; 2"
         />
       </stop>
       <stop
@@ -115,8 +117,9 @@ exports[`BulletListStyle renders correctly 1`] = `
         <animate
           attributeName="offset"
           dur="20s"
+          keyTimes="0; 0.25; 1"
           repeatCount="indefinite"
-          values="-1; 3"
+          values="0; 0; 3"
         />
       </stop>
     </linearGradient>

src/__tests__/stylized/__snapshots__/CodeStyle.test.tsx.snap

@@ -111,8 +111,9 @@ exports[`CodeStyle renders correctly 1`] = `
         <animate
           attributeName="offset"
           dur="20s"
+          keyTimes="0; 0.25; 1"
           repeatCount="indefinite"
-          values="-3; 1"
+          values="-2; -2; 1"
         />
       </stop>
       <stop
@@ -123,8 +124,9 @@ exports[`CodeStyle renders correctly 1`] = `
         <animate
           attributeName="offset"
           dur="20s"
+          keyTimes="0; 0.25; 1"
           repeatCount="indefinite"
-          values="-2; 2"
+          values="-1; -1; 2"
         />
       </stop>
       <stop
@@ -135,8 +137,9 @@ exports[`CodeStyle renders correctly 1`] = `
         <animate
           attributeName="offset"
           dur="20s"
+          keyTimes="0; 0.25; 1"
           repeatCount="indefinite"
-          values="-1; 3"
+          values="0; 0; 3"
         />
       </stop>
     </linearGradient>

src/__tests__/stylized/__snapshots__/FacebookStyle.test.tsx.snap

@@ -84,8 +84,9 @@ exports[`FacebookStyle renders correctly 1`] = `
         <animate
           attributeName="offset"
           dur="20s"
+          keyTimes="0; 0.25; 1"
           repeatCount="indefinite"
-          values="-3; 1"
+          values="-2; -2; 1"
         />
       </stop>
       <stop
@@ -96,8 +97,9 @@ exports[`FacebookStyle renders correctly 1`] = `
         <animate
           attributeName="offset"
           dur="20s"
+          keyTimes="0; 0.25; 1"
           repeatCount="indefinite"
-          values="-2; 2"
+          values="-1; -1; 2"
         />
       </stop>
       <stop
@@ -108,8 +110,9 @@ exports[`FacebookStyle renders correctly 1`] = `
         <animate
           attributeName="offset"
           dur="20s"
+          keyTimes="0; 0.25; 1"
           repeatCount="indefinite"
-          values="-1; 3"
+          values="0; 0; 3"
         />
       </stop>
     </linearGradient>