feat: add load method that returns a Promise (#329)

See #226 for context

Author: gregberge

packages/component/src/createLoadable.js

@@ -195,6 +195,13 @@ function createLoadable({ resolve = identity, render, onLoad }) {
       ctor.requireAsync(props)
     }
 
+    Loadable.load = props => {
+      if (typeof window === 'undefined') {
+        throw new Error('`load` cannot be called server-side')
+      }
+      return ctor.requireAsync(props)
+    }
+
     return Loadable
   }
 

website/src/pages/docs/api-loadable-component.mdx

@@ -48,7 +48,7 @@ A component created using `loadable` or `lazy`.
 
 ## LoadableComponent.preload
 
-Force the loading of a component.
+Triggers the loading of a component.
 
 | Arguments | Description                        |
 | --------- | ---------------------------------- |
@@ -62,7 +62,27 @@ const OtherComponent = loadable(() => import('./OtherComponent'))
 OtherComponent.preload()
 ```
 
-> This method does not return a Promise intentionnally. See https://github.com/smooth-code/loadable-components/pull/226.
+> This method does not return a Promise intentionnally. Use `load` if you need to wait for the component to be loaded.
+
+## LoadableComponent.load
+
+Force the loading of a component synchronously, returns a Promise.
+
+| Arguments | Description                        |
+| --------- | ---------------------------------- |
+| `args`    | Props passed to the load function. |
+
+```js
+import loadable from '@loadable/component'
+
+const OtherComponent = loadable(() => import('./OtherComponent'))
+
+OtherComponent.load().then(() => {
+  console.log('Component is loaded!')
+})
+```
+
+> If you don't need to know when the component will be loaded, you should use `preload` instead.
 
 ## loadable.lib