fix(component): do not call ref several times

gregberge · Oct 30, 2018 · 8cf3190 · 8cf3190
1 parent 10b7e36
commit 8cf3190
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 16 deletions.
diff --git a/packages/component/src/createLoadable.js b/packages/component/src/createLoadable.js
@@ -19,7 +19,7 @@ const withLoadableState = Component => props => (
 
 const identity = v => v
 
-function createLoadable({ resolve = identity, render }) {
+function createLoadable({ resolve = identity, render, onLoad }) {
   function loadable(loadableConstructor, options = {}) {
     const ctor = resolveConstructor(loadableConstructor)
 
@@ -89,33 +89,51 @@ function createLoadable({ resolve = identity, render }) {
       }
 
       componentDidMount() {
-        if (!this.state.result || !this.state.error) {
+        if (this.state.loading) {
           this.loadAsync()
+        } else if (!this.state.error) {
+          this.triggerOnLoad()
+        }
+      }
+
+      triggerOnLoad() {
+        if (onLoad) {
+          setTimeout(() => {
+            onLoad(this.state.result, this.props)
+          })
         }
       }
 
       loadSync() {
+        if (!this.state.loading) return
+
         try {
           const loadedModule = ctor.requireSync(this.props)
-          this.state.result = resolve(loadedModule, { Loadable })
+          const result = resolve(loadedModule, { Loadable })
+          this.state.result = result
           this.state.loading = false
         } catch (error) {
           this.state.error = error
         }
       }
 
       loadAsync() {
-        return ctor
-          .requireAsync(this.props)
-          .then(loadedModule => {
-            this.setState({
-              result: resolve(loadedModule, { Loadable }),
-              loading: false,
+        this.promise =
+          this.promise ||
+          ctor
+            .requireAsync(this.props)
+            .then(loadedModule => {
+              this.setState(
+                {
+                  result: resolve(loadedModule, { Loadable }),
+                  loading: false,
+                },
+                () => this.triggerOnLoad(),
+              )
+            })
+            .catch(error => {
+              this.setState({ error, loading: false })
             })
-          })
-          .catch(error => {
-            this.setState({ error, loading: false })
-          })
       }
 
       render() {

diff --git a/packages/component/src/library.js b/packages/component/src/library.js
@@ -2,15 +2,16 @@
 import createLoadable from './createLoadable'
 
 const library = createLoadable({
-  render({ result, loading, props, error }) {
-    if (!loading && !error && props.ref) {
+  onLoad(result, props) {
+    if (result && props.ref) {
       if (typeof props.ref === 'function') {
         props.ref(result)
       } else {
         props.ref.current = result
       }
     }
-
+  },
+  render({ result, loading, props }) {
     if (!loading && props.children) {
       return props.children(result)
     }