CODEWITHSUNDEEP
reactjsprogress-bar
Subodh Joshi
Subodh Joshi

Reputation: 13482

React Progressbar not Visible?

I have created a React progress bar with the help of third part library

import React from "react";
import { css } from "@emotion/core";
import ClipLoader from "react-spinners/ClipLoader";
 
 
// Can be a string as well. Need to ensure each key-value pair ends with ;
const override = css`
  display: block;
  margin: 0 auto;
  border-color: red;
`;
 
class AwesomeComponent extends React.Component {
  constructor(props) {
    
    super(props);
    this.state = {
      loading: true
    };
  }
 
  render() {
    return (
        
      <div className="sweet-loading">
        <ClipLoader
          css={override}
          size={150}
          color={"#123abc"}
          loading={this.state.loading}
        />
      </div>
    );
  }
}
export default AwesomeComponent;

and then import in index.js file

import AwesomeComponent from './awesomeComponent.js';

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
      <AwesomeComponent />
    </BrowserRouter>
  </Provider>,
  document.getElementById("root")
);

In my application i want to show this progresbar when data loading from nodejs api or any button clicked ..But nothing visible in GUI related to progressbar.

Upvotes: 0

Views: 462

Answers (2)

Oro
Oro

Reputation: 2588

In this example, you can see how you can change the visibility of your spinner just changed the local state by clicking on button

https://codesandbox.io/s/modern-monad-4tipc?file=/src/AwesomeComponent.js

Upvotes: 1

Vivek Doshi
Vivek Doshi

Reputation: 58523

If you are using class based component for react-promise-tracker then you need to use HOC promiseTrackerHoc :

import React from "react";
import { css } from "@emotion/core";
import ClipLoader from "react-spinners/ClipLoader";
import { promiseTrackerHoc } from "react-promise-tracker"; // <--------- HERE
  
// Can be a string as well. Need to ensure each key-value pair ends with ;
const override = css`
  display: block;
  margin: 0 auto;
  border-color: red;
`;
 
class AwesomeComponent extends React.Component {
  constructor(props) {
    
    super(props);
    this.state = {
      loading: true
    };
  }
 
  render() {
    return (
        this.props.promiseInProgress && // <--------- HERE
        <div className="sweet-loading">
            <ClipLoader
            css={override}
            size={150}
            color={"#123abc"}
            loading={this.state.loading}
            />
        </div>
    );
  }
}
export default promiseTrackerHoc(AwesomeComponent); // <--------- HERE

WORKING DEMO :

Edit #SO-promise-tracker

Note :

You can checkout DOC, as they have explained everything, I think you can help you to find out whatever the scenario you want to implement

Upvotes: 1

Related Questions