Replace react-loadable with loadable-components

package.json

@@ -93,6 +93,7 @@
     "node": ">=8.9"
   },
   "dependencies": {
+    "@loadable/component": "^5.10.2",
     "deepmerge": "^4.0.0",
     "expo": "^33.0.0",
     "hoist-non-react-statics": "^3.3.0",
@@ -134,6 +135,7 @@
     "@types/enzyme-async-helpers": "^0.9.1",
     "@types/hoist-non-react-statics": "^3.3.0",
     "@types/jest": "^24.0.15",
+    "@types/loadable__component": "^5.10.0",
     "@types/lodash.flowright": "^3.5.6",
     "@types/lodash.isboolean": "^3.0.6",
     "@types/lodash.isfunction": "^3.0.6",

src/registries/ComponentRegistry.ts → src/registries/ComponentRegistry.tsx

@@ -4,11 +4,15 @@ import {
 	BlueBaseModuleRegistryItem,
 } from './BlueBaseModuleRegistry';
 import { ComponentStyles, applyStyles } from '../themes';
-import { MaybeThunk, Thunk, getDefiniteBlueBaseModule, isBlueBaseModule } from '../utils';
+import {
+	MaybeThunk,
+	Thunk,
+	getDefiniteBlueBaseModule,
+	isBlueBaseModule,
+	withLoadable,
+} from '../utils';
 
 import { ItemCollection } from './Registry';
-import Loadable from 'react-loadable';
-import { ReactLoadableLoading } from '../components/';
 import flowRight from 'lodash.flowright';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 
@@ -73,7 +77,7 @@ export class ComponentRegistry extends BlueBaseModuleRegistry<
 
 		// If component bundle has to be downloaded, wrap into lazy
 		const rawComponent = item.value.isAsync
-			? Loadable({ loader: () => item.value, loading: ReactLoadableLoading })
+			? withLoadable(item.value)
 			: (item.value.module as React.ComponentType<any>);
 
 		let themedComponent = rawComponent;

src/utils/index.ts

@@ -8,3 +8,4 @@ export * from './Promises';
 export * from './Screen';
 export * from './Thunks';
 export * from './Typescript';
+export * from './withLoadable';

src/utils/withLoadable.tsx

@@ -0,0 +1,57 @@
+import { StatefulComponent, StatefulComponentProps } from '@bluebase/components';
+
+import { Omit } from './';
+import React from 'react';
+import loadable from '@loadable/component';
+
+export function withLoadable(
+	promise: Promise<React.ComponentType<any>>,
+	options: Omit<
+		StatefulComponentProps,
+		'children' | 'component' | 'data' | 'isEmpty' | 'onRetry'
+	> = {}
+) {
+	const Component = loadable(() => promise);
+	const {
+		checkError,
+		delay,
+		emptyComponent,
+		error,
+		errorComponent,
+		isLoading,
+		loading,
+		loadingComponent,
+		onTimeout,
+		timeout,
+	} = options;
+
+	return class InnerLoadable extends React.Component<any> {
+		render() {
+			const onRetry = this.forceUpdate;
+
+			return (
+				<StatefulComponent
+					{...{ checkError, error, errorComponent, isEmpty: () => false, onRetry }}
+				>
+					<Component
+						fallback={
+							<StatefulComponent
+								{...{
+									delay,
+									emptyComponent,
+									isLoading,
+									loading,
+									loadingComponent,
+									onRetry,
+									onTimeout,
+									timeout,
+								}}
+							/>
+						}
+						{...this.props}
+					/>
+				</StatefulComponent>
+			);
+		}
+	};
+}

yarn.lock

@@ -1269,7 +1269,7 @@
   dependencies:
     regenerator-runtime "^0.13.2"
 
-"@babel/runtime@^7.4.3", "@babel/runtime@^7.4.5":
+"@babel/runtime@^7.4.3", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5":
   version "7.5.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.5.5.tgz#74fba56d35efbeca444091c7850ccd494fd2f132"
   integrity sha512-28QvEGyQyNkB0/m2B4FU7IEZGK2NUrcMtT6BZEFALTguLk+AUT6ofsHtPk5QyjAdUkpMJ+/Em+quwz4HOt30AQ==
@@ -1742,6 +1742,14 @@
     "@types/istanbul-reports" "^1.1.1"
     "@types/yargs" "^12.0.9"
 
+"@loadable/component@^5.10.2":
+  version "5.10.2"
+  resolved "https://registry.yarnpkg.com/@loadable/component/-/component-5.10.2.tgz#1f51e7a0064cc0f59604b1933bbc7a1bbfd84d18"
+  integrity sha512-pUzGRc/mhGzZ0+xJPQErnS68BQEApFYGwn10iSDqBHdDhOruCASTer1J+rYI4jaJJcegJwnuzh7j/SqMoiCyAQ==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    hoist-non-react-statics "^3.3.0"
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -2534,6 +2542,13 @@
   dependencies:
     "@types/jest-diff" "*"
 
+"@types/loadable__component@^5.10.0":
+  version "5.10.0"
+  resolved "https://registry.yarnpkg.com/@types/loadable__component/-/loadable__component-5.10.0.tgz#178fdc401983f4f93647fac778226da7b8c1e080"
+  integrity sha512-AaDP1VxV3p7CdPOtOTl3ALgQ6ES4AxJKO9UGj9vJonq/w2yERxwdzFiWNQFh9fEDXEzjxujBlM2RmSJtHV1/pA==
+  dependencies:
+    "@types/react" "*"
+
 "@types/lodash.flowright@^3.5.6":
   version "3.5.6"
   resolved "https://registry.yarnpkg.com/@types/lodash.flowright/-/lodash.flowright-3.5.6.tgz#97c8c80719b38fee666dbd80ea6273986e64d17a"