Loading bar doesn't hide itself after progress resets to 0 about react-top-loading-bar HOT 6 CLOSED

klendi commented on May 26, 2024

Loading bar doesn't hide itself after progress resets to 0

from react-top-loading-bar.

Comments (6)

klendi commented on May 26, 2024

Hello. What version of the package are you using? And share the code so I can see

from react-top-loading-bar.

char-chen commented on May 26, 2024

Version: 1.1.1

constructor(props) {
    super(props);
    this.state = { loadingBarProgress: 0 };
}
onLoaderFinished = () => {
    this.setState({ loadingBarProgress: 0 });
};
componentDidMount() {
    this.setState({loadingBarProgress : 100})
}

<LoadingBar
          progress={this.state.loadingBarProgress}
          height={3}
          color='orange'
          onLoaderFinished={() => this.onLoaderFinished()}
        />

The page that use to test this out with doesn't have a white background. Therefore I had to do

<LoadingBar
          progress={this.state.loadingBarProgress}
          height={this.state.loadingBarProgress !== 0 ? 3 : 0}
          color='orange'
          onLoaderFinished={() => this.onLoaderFinished()}
        />

in order to hide the top white bar.
Is there a better way to do this?

from react-top-loading-bar.

klendi commented on May 26, 2024

I would use the one with refs

import React, { Component } from 'react'

import LoadingBar from 'react-top-loading-bar'

export default class ExampleWithRefs extends Component {
  startFetch = () => {
    this.LoadingBar.continuousStart()
  }

  onFinishFetch = () => {
    this.LoadingBar.complete()
  }

  render() {
    return (
      <div>
        <LoadingBar onRef={ref => (this.LoadingBar = ref)} />

        <button onClick={() => this.LoadingBar.continuousStart()}>
          Start Continuous Bar
        </button>
        <button onClick={() => this.LoadingBar.staticStart()}>
          Start Static Bar
        </button>
        <button onClick={() => this.LoadingBar.complete()}>Complete</button>
        <br />
        <button onClick={() => this.LoadingBar.add(10)}>Add 10</button>
        <button onClick={() => this.LoadingBar.add(10)}>Add 30</button>
      </div>
    )
  }
}```

Check out this example