Material-UI RefreshIndicator doesn't show in initial page loading

Question

I got stuck with showing loading icon on initial page loading. The code looks fine for me but some how it doesn't shows the loading icon. I am using material ui RefreshIndicator for loading icon. I am using material-ui V^0.18.7 .

Here is my initial App.js code

import React, { Component } from 'react';
import HeaderTemplate from './Layout/Components/Header';
import FooterTemplate from './Layout/Components/Footer';
import RefreshIndicator from 'material-ui/RefreshIndicator';
import RaisedButton from 'material-ui/RaisedButton';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      showLoading: true
    }
  }
  componentDidMount(){
    this.setState({
      showLoading: false
    })
  }

  renderLoading(){
      <RefreshIndicator
        size={40}
        left={10}
        top={0}
        status="loading"
        style={{display: 'inline-block', position: 'relative'}}
      />
  }
  render() {
    const muiTheme = imports.getMuiTheme({

    });
    return (
      <MuiThemeProvider muiTheme={muiTheme}>
        <div>
        <HeaderTemplate logo="Postme" />
          <div id="demo-settings" className="">
            <a href="#" id="demo-settings-toggler" className="fa fa-dot-circle-o"></a>
          </div>
        <div className="container-fluid bodyfluid">
        {this.state.showLoading ? this.renderLoading(): ''}
          {this.props.children}
        </div>
        <FooterTemplate />
      </div>
      </MuiThemeProvider>
    );
  }
}

export default App;

Answer 1

Your method renderLoading() doesn't return anything. It just creates the JSX-Element into "nothing".

import React, { Component } from 'react';
import HeaderTemplate from './Layout/Components/Header';
import FooterTemplate from './Layout/Components/Footer';
import RefreshIndicator from 'material-ui/RefreshIndicator';
import RaisedButton from 'material-ui/RaisedButton';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      showLoading: true
    }
  }
  componentDidMount(){
    this.setState({
      showLoading: false
    })
  }

  renderLoading(){
    return (<div style={{position: 'relative'}}>
      <RefreshIndicator
        size={40}
        left={10}
        top={0}
        status="loading"
        style={{display: 'inline-block', position: 'relative'}}
      />
  </div>);
  }
  render() {
    const muiTheme = imports.getMuiTheme({

    });
    return (
      <MuiThemeProvider muiTheme={muiTheme}>
        <div>
        <HeaderTemplate logo="Postme" />
          <div id="demo-settings" className="">
            <a href="#" id="demo-settings-toggler" className="fa fa-dot-circle-o"></a>
          </div>
        <div className="container-fluid bodyfluid">
        {this.state.showLoading ? this.renderLoading(): ''}
          {this.props.children}
        </div>
        <FooterTemplate />
      </div>
      </MuiThemeProvider>
    );
  }
}


export default App;

Now it returns the JSX element your created, and it should be rendered as you like.