WaitToRender

The WaitToRender wrapper component can be used to defer loading of vanilla React components. If a component requires at least one property, the WaitToRender wrapper will wait to render it until that property has been defined. Let's say we have a component that requires a name property string.

<WaitToRender wrappedComponent={DemoComponent} name={undefined} />

If we were to wrap that component and pass it a value of undefined (as shown above) we would see this:

<WaitToRender wrappedComponent={DemoComponent} name='Brian' />

If we were to pass a truthy value (as shown above) then the actual component would be rendered:

WaitToRenderDecorator

The above syntax can get a little clunky though. It also requires consumers of a component to care about whether that component should defer its rendering. For this reason a WaitToRenderDecorator has been created as well. To use it just decorate your React component class like so:

@WaitToRenderDecorator
class DemoDecoratedComponent extends Component {
  // Your class goes here...
}

Now we get the same benefit of the WaitToRenderDecorator but cleaner syntax:

<DemoDecoratedComponent name='Brian' />

Loading indicators for both the WaitToRenderDecorator wrapper and the WaitToRenderDecorator can be customized. The simplest way of doing this is to specify a custom style for the .LoadingIndicator class. For even greater controler though you can specify your own loading component as an argument to the wrapper:

<WaitToRender
  wrappedComponent={DemoComponent}
  loadingIndicator={customLoadingComponent}
  name={undefined} />

Or the decorator:

@WaitToRenderDecorator
export default class DemoDecoratedComponent extends Component {
  static loadingIndicator = <CustomLoadingComponent />

  // Your class goes here...
}