DeferredComponent

The DeferredComponent wrapper component can be used to defer loading of vanilla React components. If a component requires at least one property, the DeferredComponent 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.

<DeferredComponent 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:

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

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

DeferredComponentDecorator

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 DeferredComponentDecorator has been created as well. To use it just decorate your React component class like so:

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

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

<DemoDecoratedComponent name='Brian' />

Loading indicators for both the DeferredComponent wrapper and the DeferredComponentDecorator can be customized. The simplest way of doing this is to specify a custom style for the .LoadingIndicator class like so:

.LoadingIndicator {
  text-align: center;
  padding: 10px;
  border-radius: 10px;
  background-color: #777;
  color: #DDD;
  font-style: italic;
}

For even greater controler though you can specify your own loading component as an argument to the wrapper:

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

Or the decorator:

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

  // Your class goes here...
}