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:

Loading...

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

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

Hi, my name is Brian .

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' />

Hi, my name is 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} />

Custom loading component...

Or the decorator:

@WaitToRenderDecorator export default class DemoDecoratedComponent extends Component { static loadingIndicator = <CustomLoadingComponent /> // Your class goes here... }

Custom loading component...