From c4d7c6b84c16b3fc87540d1ffdbd4197596f53e1 Mon Sep 17 00:00:00 2001
From: Emily Marigold Klassen <forivall@users.noreply.github.com>
Date: Tue, 30 Mar 2021 18:54:45 -0700
Subject: [PATCH] fix: add displayNames to generated components

---
 packages/component/src/createLoadable.js | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/component/src/createLoadable.js b/packages/component/src/createLoadable.js
index fdaa0773..4918fd2c 100644
--- a/packages/component/src/createLoadable.js
+++ b/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)