feat: make the component more ergonomic

- Progress is only reset to 0 when necessary
- Fix a bug where the before interactive timer wasn't correctly cleared
- Fix a bug where the setState throttler wouldn't be correctly cleared when changing progressInterval
- maxProgressBeforeInteractive now only applies when resuming from SSR
- Improve tests and demo

BREAKING CHANGE: while the API hasn't changed, the internal behavior changed enough to worth having a major bump

Author: satazor

.stylelintrc.json

@@ -0,0 +1,6 @@
+{
+    "extends": "@moxy/stylelint-config",
+    "ignoreFiles": [
+        "!**/*.css"
+    ]
+}

README.md

@@ -146,17 +146,17 @@ The `progressDecay` function signature is `(time) => <progress>`, where `time` i
 Type: `number`   
 Default: 100
 
-The interval, in ms, to report progress. The value of `progressInterval` will effectively throttle all the internal behavior of `<WaitForReact>`, including the frequency in which the `children` render prop will be called.
+The interval, in ms, in which progress will be incremented.
 
-ℹ️ If you are using CSS transitions, the transition durations should be slightly smaller than `progressInterval`. This circumvents an issue with several browsers, such as Chrome and Firefox, where updating a CSS property in the middle of a transition will cause the animation to "restart".
+ℹ️ If you are using CSS transitions, the value of `progressInterval` should be slightly higher than the CSS transition duration. This circumvents an issue with several browsers, such as Chrome and Firefox, where updating a CSS property in the middle of a transition will cause the animation to "restart".
 
 ### promise
 
 Type: `Promise` or `PProgress `
 
 A promise to wait for, after the app becomes interactive.
 
-When a standard `Promise` is given, `<WaitForReact>` will initiate a "fake progress" until the promise settles. However, you may pass a [`PProgress `](https://github.com/sindresorhus/p-progress). In this case, the progress reported by the promise will be used instead of the "fake progress".
+When a standard `Promise` is given, `<WaitForReact>` will initiate the same "fake progress" mentioned in [`progressDecay`](#progressdecay) until the promise settles. However, you may pass a [`PProgress `](https://github.com/sindresorhus/p-progress). In this case, the progress reported by the promise will be used instead of the "fake progress".
 
 ### children
 

demo/pages/index.js

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import WaitForReact from '@moxy/react-wait-for-react';
 import styles from './index.module.css';
 
+const transitionDuration = 200 + 50; // Keep this value slightly higher than the CSS counterpart
 const applyProgressBeforeInteractive = `function (elements, progress) {
     elements.progressBar.style = 'transform:scaleX(' + progress + ')';
 }`;
@@ -14,7 +15,7 @@ const Home = () => (
         <WaitForReact
             applyProgressBeforeInteractive={ applyProgressBeforeInteractive }
             promise={ promise }
-            progressInterval={ 200 }>
+            progressInterval={ transitionDuration }>
             { ({ progress }) => (
                 <div className={ classNames(styles.splashScreen, { [styles.loaded]: progress >= 1 }) }>
                     <div

demo/pages/index.module.css

@@ -1,4 +1,8 @@
+/* stylelint-disable declaration-property-value-blacklist, unit-blacklist, scale-unlimited/declaration-strict-value */
+
 .splashScreen {
+    --transition-duration: 200ms;
+
     position: fixed;
     top: 0;
     right: 0;
@@ -8,10 +12,11 @@
     justify-content: center;
     align-items: center;
     background-color: #131313;
-    transition: opacity 0.4s 0.2s ease, visibility 0s 0.6s;
+    transition: opacity 0.4s var(--transition-duration) ease, visibility 0s calc(0.4s + var(--transition-duration));
 }
 
 .splashScreen.loaded {
+    visibility: hidden;
     opacity: 0;
 }
 
@@ -21,15 +26,16 @@
     right: 0;
     left: 0;
     height: 4px;
+    transform: scaleX(0);
     transform-origin: left center;
     background: #fffd8f;
     pointer-events: none;
-    transition: transform 0.2s linear;
+    transition: transform var(--transition-duration) linear;
 }
 
 .content {
     color: #fff;
+    font-family: -apple-system, "Helvetica Neue", sans-serif;
     font-size: 34px;
-    font-family: -apple-system, 'Helvetica Neue', sans-serif;
     font-weight: 300;
 }