fix: add displayNames to generated components (#731)

Co-authored-by: Emily Marigold Klassen <[email protected]>

Author: forivall

packages/component/src/createLoadable.js

@@ -26,11 +26,18 @@ function resolveConstructor(ctor) {
   return ctor
 }
 
-const withChunkExtractor = Component => props => (
-  <Context.Consumer>
-    {extractor => <Component __chunkExtractor={extractor} {...props} />}
-  </Context.Consumer>
-)
+const withChunkExtractor = Component => {
+  const LoadableWithChunkExtractor = props => (
+    <Context.Consumer>
+      {extractor => <Component __chunkExtractor={extractor} {...props} />}
+    </Context.Consumer>
+  )
+  if (Component.displayName) {
+    LoadableWithChunkExtractor.displayName =
+      `${Component.displayName}WithChunkExtractor`;
+  }
+  return LoadableWithChunkExtractor
+}
 
 const identity = v => v
 
@@ -332,6 +339,8 @@ function createLoadable({
       <EnhancedInnerLoadable forwardedRef={ref} {...props} />
     ))
 
+    Loadable.displayName = 'Loadable'
+
     // In future, preload could use `<link rel="preload">`
     Loadable.preload = props => {
       ctor.requireAsync(props)