From 4ee934a5c938006e7261d5ba0f86a71a3773eb8a Mon Sep 17 00:00:00 2001
From: Ohad Levy <ohadlevy@gmail.com>
Date: Mon, 29 Apr 2019 23:28:40 +0300
Subject: [PATCH] fixes #24570 - dynamicailly import password strength
 component

this reduced the vendor file by about 800kb and reduce
every full page reload by about 100ms on my machine

more benchmark in the PR
---
 config/webpack.vendor.js                                  | 1 -
 package.json                                              | 1 +
 .../react_app/components/PasswordStrength/index.js        | 8 +++++++-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/config/webpack.vendor.js b/config/webpack.vendor.js
index d210ebca602d..256d506102b4 100644
--- a/config/webpack.vendor.js
+++ b/config/webpack.vendor.js
@@ -11,7 +11,6 @@ module.exports = [
   'react-ellipsis-with-tooltip',
   'react-numeric-input',
   'react-onclickoutside',
-  'react-password-strength',
   'patternfly-react',
   'react-redux',
   'redux',
diff --git a/package.json b/package.json
index d8103e267760..1abf12d16e4e 100644
--- a/package.json
+++ b/package.json
@@ -100,6 +100,7 @@
     "react-dom": "^16.8.1",
     "react-ellipsis-with-tooltip": "^1.0.8",
     "react-intl": "^2.8.0",
+    "react-loadable": "^5.5.0",
     "react-numeric-input": "^2.0.7",
     "react-onclickoutside": "^6.6.2",
     "react-password-strength": "^2.4.0",
diff --git a/webpack/assets/javascripts/react_app/components/PasswordStrength/index.js b/webpack/assets/javascripts/react_app/components/PasswordStrength/index.js
index 1ac77fd13902..a63e25acc393 100644
--- a/webpack/assets/javascripts/react_app/components/PasswordStrength/index.js
+++ b/webpack/assets/javascripts/react_app/components/PasswordStrength/index.js
@@ -1,5 +1,7 @@
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
+import Loadable from 'react-loadable';
+import { LoadingState } from 'patternfly-react';
 
 import * as actions from './PasswordStrengthActions';
 import {
@@ -8,7 +10,11 @@ import {
 } from './PasswordStrengthSelectors';
 import reducer from './PasswordStrengthReducer';
 
-import PasswordStrength from './PasswordStrength';
+const PasswordStrength = Loadable({
+  loader: () =>
+    import(/* webpackChunkName: 'passwordStrength' */ './PasswordStrength'),
+  loading: LoadingState,
+});
 
 // map state to props
 const mapStateToProps = ({ passwordStrength }) => ({