反应中每个组件的旋转器

Question

What is the best practice and efficient way for implement spinner component for whole apps ?

My sample code :

render() {
  if (this.state.loading)
    return (
      <Spinner/>
    )

  return (
    <div className="container">
  )
}

i want avoid to rewrite the same logic checking loading state for each component. TIA.

Answer 1

Simply apply a ternary:

render() {
  return this.state.loading ? <Spinner/> : <App />
}

And make it a function:

loader.js

import Spinner from './spinner.js';
export default function LoadManager = ({loading}) => props.loading ? <Spinner /> : props.children;

So in your components

render() {
  return 
    <LoadManager loading={this.state.loading}>
      <App />
    </LoadManager>
}

Other more common ways involves use of React Loadable:

import Loadable from 'react-loadable';
import Loading from './my-loading-component';

const LoadableComponent = Loadable({
  loader: () => import('./my-component'),
  loading: Loading,
});

export default class App extends React.Component {
  render() {
    return <LoadableComponent/>;
  }

This is more efficient too, has the code will be splitted.

Answer 2

make a utils folder and make a file (sppiner.js) in that file and write this code

spinner.js

export default function spinner({text}) {
  return (
    <div>
      <Spinner/>
      <span>{text}</span>
    </div>
  )

and after that in each component that you want use spinner write this code

import Spinner from "utils/spinner";

return(
...
{this.state.loading && <Spinner text={"your text..."} />}
...
)

Answer 3

What about adding this kind of function?

function renderSpinner() {
  return this.state.loading && <Spinner />
}