How to hide spinner component

Question

I am trying to use the react.js spinner component and I can't figure out how I to hide it once my task is complete.

Here is a simple codepen where I am using hidden property. I will set it up to false or true depending on if I want to show it or not:

https://codepen.io/manish_shukla01/pen/GLNOyw

    <Spinner hidden={true} size={SpinnerSize.large} label="manish's large spinned" />

Behan

Answer 1

You need to use conditional rendering to hide/show the spinner. You can define a component state then can set it up to false or true depending on if you want to show it or not.

 class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hidden: false
    };
  }
  render() {
    return (
      <div className="App">
        {!this.state.hidden && <SpinnerBasicExample />}
        <h2>Start editing to see some magic happen!</h2>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

For more you can read this https://reactjs.org/docs/conditional-rendering.html

Subprincipal

Answer 2

Conditional rendering using state.

In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application.

Working example (click on the Dashboard tab):

---

containers/Dashboard

import isEmpty from "lodash/isEmpty";
import React, { Component } from "react";
import api from "../../utils/api";
import DisplayUser from "../../components/DisplayUser";
import DisplaySignUp from "../../components/DisplaySignUp";
import Spinner from "../../components/Spinner";

class Dashboard extends Component {
  state = {
    isLoading: true,
    currentUser: {}
  };

  componentDidMount = () => {
    this.fetchUsers();
  };

  fetchUsers = async () => {
    try {
      const res = await api.get(`/users/1`);
      setTimeout(() => {
        this.setState({ currentUser: res.data, isLoading: false });
      }, 1500);
    } catch (e) {
      console.error(e.toString());
    }
  };

  // the below can be read like so:
  // if "isLoading" is true...  then display a spinner
  // else if "currentUser" is not empty... then display the user details
  // else show a signup message
  render = () =>
    this.state.isLoading ? (
      <Spinner />
    ) : !isEmpty(this.state.currentUser) ? (
      <DisplayUser currentUser={this.state.currentUser} />
    ) : (
      <DisplaySignUp />
    );
}

export default Dashboard;

Categorize

Answer 3

For what you intend to do, just adding the hidden prop won't work as that is not an expected attribute of the Spinner component. I think what you need to do is to introduce conditional rendering in your component. Kindly see implementation below:

import * as React from 'react';
import { render } from 'react-dom';
import {
  PrimaryButton,
  Spinner,
  SpinnerSize,
  Label,
  IStackProps,
  Stack
} from 'office-ui-fabric-react';

import './styles.css';

const { useState } = React;

const SpinnerBasicExample: React.StatelessComponent = () => {
  // This is just for laying out the label and spinner (spinners don't have to be inside a Stack)
  const rowProps: IStackProps = { horizontal: true, verticalAlign: 'center' };

  const tokens = {
    sectionStack: {
      childrenGap: 10
    },
    spinnerStack: {
      childrenGap: 20
    }
  };

  return (
    <Stack tokens={tokens.sectionStack}>
      <Stack {...rowProps} tokens={tokens.spinnerStack}>
        <Label>Extra small spinner</Label>
        <Spinner size={SpinnerSize.xSmall} />
      </Stack>

      <Stack {...rowProps} tokens={tokens.spinnerStack}>
        <Label>Small spinner</Label>
        <Spinner size={SpinnerSize.small} />
      </Stack>
    </Stack>
  );
};

function App() {
  const [hidden, setHidden] = useState(false);
  return (
    <div className="App">
      {hidden && <SpinnerBasicExample />}
      <PrimaryButton
        data-automation-id="test"
        text={!hidden ? 'Show spinner' : 'Hide spinner'}
        onClick={() => setHidden(!hidden)}
        allowDisabledFocus={true}
      />
    </div>
  );
}

Lavabo