From 8d8ac7509f8c813a7564fbb26e11c357e3910229 Mon Sep 17 00:00:00 2001
From: pkarnawat <pkarnawat@godaddy.com>
Date: Mon, 9 Mar 2020 13:51:50 -0700
Subject: [PATCH] Add support for adding a displayName property for the
 returned Loadable component

---
 README.md         | 11 +++++++++++
 __tests__/test.js | 21 +++++++++++++++++++--
 src/index.js      |  6 +++++-
 3 files changed, 35 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index ec0c6eb1..e5522685 100644
--- a/README.md
+++ b/README.md
@@ -779,6 +779,17 @@ Loadable({
 });
 ```
 
+#### `opts.displayName`
+
+Display name for the returned component. Defaults to `LoadableComponent`.
+
+```js
+Loadable({
+  displayName: 'MyLoadableComponent',
+  loader: () => import('./Bar'),
+});
+```
+
 #### `opts.delay`
 
 Time to wait (in milliseconds) before passing
diff --git a/__tests__/test.js b/__tests__/test.js
index a2414470..c56962cb 100644
--- a/__tests__/test.js
+++ b/__tests__/test.js
@@ -201,6 +201,23 @@ test('loadable map error', async () => {
   expect(component.toJSON()).toMatchSnapshot(); // success
 });
 
+test('display name', async () => {
+  let LoadableMyComponent = Loadable({
+    displayName: 'ComponentWith200Delay',
+    loader: createLoader(200, () => MyComponent),
+    loading: MyLoadingComponent
+  });
+
+  expect(LoadableMyComponent.displayName).toEqual('ComponentWith200Delay');
+
+  LoadableMyComponent = Loadable({
+    loader: createLoader(200, () => MyComponent),
+    loading: MyLoadingComponent
+  });
+
+  expect(LoadableMyComponent.displayName).toEqual('LoadableComponent');
+});
+
 describe('preloadReady', () => {
   beforeEach(() => {
     global.__webpack_modules__ = { 1: true, 2: true };
@@ -272,9 +289,9 @@ describe('preloadReady', () => {
       delay: 0,
       timeout: 200,
     });
-  
+
     let loadingComponent = renderer.create(<LoadableMyComponent prop="foo" />);
-  
+
     expect(loadingComponent.toJSON()).toMatchSnapshot(); // loading
   });
 });
diff --git a/src/index.js b/src/index.js
index 5864dc33..8c83758f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -134,7 +134,7 @@ function createLoadableComponent(loadFn, options) {
     });
   }
 
-  return class LoadableComponent extends React.Component {
+  class LoadableComponent extends React.Component {
     constructor(props) {
       super(props);
       init();
@@ -254,6 +254,10 @@ function createLoadableComponent(loadFn, options) {
       }
     }
   };
+
+  LoadableComponent.displayName = opts.displayName || 'LoadableComponent';
+
+  return LoadableComponent;
 }
 
 function Loadable(opts) {