Release v2.3.3

Reset position of the Loading Bar if it is triggered to be shown during ending animation

Closes #11

CHANGELOG.md

@@ -1,5 +1,8 @@
 # Release History
 
+## 2.3.3
+   - Reset position of the Loading Bar if it is triggered to be shown during ending animation
+
 ## 2.3.2
    - Fix infinite loop when Loading Bar is triggered to be shown during ending animation
 

build/loading_bar.js

@@ -65,24 +65,27 @@ var LoadingBar = exports.LoadingBar = function (_React$Component) {
   }, {
     key: 'launch',
     value: function launch() {
-      var progressInterval = this.state.progressInterval;
+      var _state = this.state;
+      var progressInterval = _state.progressInterval;
+      var percent = _state.percent;
       var animationTimeout = this.state.animationTimeout;
 
 
       if (!progressInterval) {
         progressInterval = setInterval(this.boundSimulateProgress, this.props.updateTime);
         clearTimeout(animationTimeout);
+        percent = 0;
       }
 
-      this.setState(_extends({}, this.state, { progressInterval: progressInterval }));
+      this.setState(_extends({}, this.state, { progressInterval: progressInterval, percent: percent }));
     }
   }, {
     key: 'simulateProgress',
     value: function simulateProgress() {
-      var _state = this.state;
-      var progressInterval = _state.progressInterval;
-      var percent = _state.percent;
-      var animationTimeout = _state.animationTimeout;
+      var _state2 = this.state;
+      var progressInterval = _state2.progressInterval;
+      var percent = _state2.percent;
+      var animationTimeout = _state2.animationTimeout;
 
 
       if (percent === 100) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-redux-loading-bar",
-  "version": "2.3.2",
+  "version": "2.3.3",
   "description": "Simple Loading Bar for Redux and React",
   "main": "build/index.js",
   "scripts": {

spec/loading_bar.js

@@ -236,7 +236,7 @@ describe('LoadingBar', () => {
         spySimulateProgress.restore()
       })
 
-      it('does not hang', () => {
+      it('does not hang and resets the position', () => {
         const wrapper = shallow(<LoadingBar />)
 
         // Show Loading Bar
@@ -257,15 +257,14 @@ describe('LoadingBar', () => {
         wrapper.setProps({ loading: 1 })
         expect(wrapper.state().progressInterval).toExist()
 
-        // Wait one more tick to get the animation to finish
-        clock.tick(UPDATE_TIME)
-        expect(wrapper.state().progressInterval).toNotExist()
+        // It should be shown
+        expect(wrapper.state().percent).toNotEqual(100)
 
         // Hide Loading Bar and emulate a long period of time
         wrapper.setProps({ loading: 0 })
         clock.tick(UPDATE_TIME * 1000)
 
-        expect(spySimulateProgress.calls.length).toEqual(4)
+        expect(spySimulateProgress.calls.length).toEqual(5)
       })
     })
   })

src/loading_bar.js

@@ -34,7 +34,7 @@ export class LoadingBar extends React.Component {
   }
 
   launch() {
-    let { progressInterval } = this.state
+    let { progressInterval, percent } = this.state
     const { animationTimeout } = this.state
 
     if (!progressInterval) {
@@ -43,9 +43,10 @@ export class LoadingBar extends React.Component {
         this.props.updateTime
       )
       clearTimeout(animationTimeout)
+      percent = 0
     }
 
-    this.setState({ ...this.state, progressInterval })
+    this.setState({ ...this.state, progressInterval, percent })
   }
 
   simulateProgress() {