Higher-order React component for providing fallback content while server-dependent props are absent.

consumer.js

// `MyComponent` depends on server-data, so it will render nothing
// or a fallback component until fetching is completed.

const withFallback = composeFallback(({ serverData }) => [serverData]);

export default withFallback(MyComponent);

with_fallback.js

// https://reactjs.org/docs/concurrent-mode-suspense.html

import React from "react";
import { isNil } from "lodash/fp";

export const composeFallback = (mapPropsToAsyncProps = () => []) => (
  WrappedComponent,
  Fallback = null
) => props =>
  [].concat(mapPropsToAsyncProps(props)).some(asyncProp => isNil(asyncProp)) ? (
    Fallback
  ) : (
    <WrappedComponent {...props} />
  );