From fb11048d879fb7a7ab8e6f07c3792d189dc29569 Mon Sep 17 00:00:00 2001
From: sjcode99 <52974372+sjcode99@users.noreply.github.com>
Date: Thu, 26 Oct 2023 01:20:26 +0530
Subject: [PATCH] =?UTF-8?q?Convert=20./components/widgets/loading/loading?=
 =?UTF-8?q?=5Fwrapper.tsx=20from=20Class=20C=E2=80=A6=20(#24997)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Convert ./components/widgets/loading/loading_wrapper.tsx from Class Component to Function Component

* removed snapshots from the testcase

---------

Co-authored-by: sjcode99 <misuraj2611@gmail.com>
---
 .../__snapshots__/save_button.test.tsx.snap   | 20 ++---
 .../setting_picture.test.tsx.snap             | 32 ++++----
 .../spinner_button.test.tsx.snap              |  8 +-
 .../permissions_scheme_summary.test.tsx.snap  | 12 +--
 .../request_button.test.tsx.snap              | 20 ++---
 .../marketplace_item_app.test.tsx.snap        | 36 ++++-----
 .../marketplace_item_plugin.test.tsx.snap     | 36 ++++-----
 .../email_notification_setting.test.tsx.snap  |  8 +-
 .../manage_auto_responder.test.tsx.snap       |  8 +-
 .../warn_metric_ack_modal.test.tsx.snap       |  8 +-
 .../loading_wrapper.test.tsx.snap             | 81 +++++++++++++++++++
 .../widgets/loading/loading_wrapper.test.tsx  | 18 +----
 .../widgets/loading/loading_wrapper.tsx       | 29 +++----
 13 files changed, 189 insertions(+), 127 deletions(-)
 create mode 100644 webapp/channels/src/components/widgets/loading/__snapshots__/loading_wrapper.test.tsx.snap

diff --git a/webapp/channels/src/components/__snapshots__/save_button.test.tsx.snap b/webapp/channels/src/components/__snapshots__/save_button.test.tsx.snap
index 05828e668c..9238579129 100644
--- a/webapp/channels/src/components/__snapshots__/save_button.test.tsx.snap
+++ b/webapp/channels/src/components/__snapshots__/save_button.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`components/SaveButton should match snapshot, extraClasses 1`] = `
   id="saveSetting"
   type="submit"
 >
-  <LoadingWrapper
+  <Memo(LoadingWrapper)
     loading={false}
     text={
       <Memo(MemoizedFormattedMessage)
@@ -23,7 +23,7 @@ exports[`components/SaveButton should match snapshot, extraClasses 1`] = `
         id="save_button.save"
       />
     </span>
-  </LoadingWrapper>
+  </Memo(LoadingWrapper)>
 </button>
 `;
 
@@ -35,7 +35,7 @@ exports[`components/SaveButton should match snapshot, on defaultMessage 1`] = `
   id="saveSetting"
   type="submit"
 >
-  <LoadingWrapper
+  <Memo(LoadingWrapper)
     loading={false}
     text={
       <Memo(MemoizedFormattedMessage)
@@ -50,7 +50,7 @@ exports[`components/SaveButton should match snapshot, on defaultMessage 1`] = `
         id="save_button.save"
       />
     </span>
-  </LoadingWrapper>
+  </Memo(LoadingWrapper)>
 </button>
 `;
 
@@ -62,7 +62,7 @@ exports[`components/SaveButton should match snapshot, on defaultMessage 2`] = `
   id="saveSetting"
   type="submit"
 >
-  <LoadingWrapper
+  <Memo(LoadingWrapper)
     loading={false}
     text={
       <Memo(MemoizedFormattedMessage)
@@ -74,7 +74,7 @@ exports[`components/SaveButton should match snapshot, on defaultMessage 2`] = `
     <span>
       Go
     </span>
-  </LoadingWrapper>
+  </Memo(LoadingWrapper)>
 </button>
 `;
 
@@ -86,7 +86,7 @@ exports[`components/SaveButton should match snapshot, on savingMessage 1`] = `
   id="saveSetting"
   type="submit"
 >
-  <LoadingWrapper
+  <Memo(LoadingWrapper)
     loading={true}
     text={
       <Memo(MemoizedFormattedMessage)
@@ -101,7 +101,7 @@ exports[`components/SaveButton should match snapshot, on savingMessage 1`] = `
         id="save_button.save"
       />
     </span>
-  </LoadingWrapper>
+  </Memo(LoadingWrapper)>
 </button>
 `;
 
@@ -113,7 +113,7 @@ exports[`components/SaveButton should match snapshot, on savingMessage 2`] = `
   id="saveSetting"
   type="submit"
 >
-  <LoadingWrapper
+  <Memo(LoadingWrapper)
     loading={true}
     text="Saving Config..."
   >
@@ -123,6 +123,6 @@ exports[`components/SaveButton should match snapshot, on savingMessage 2`] = `
         id="save_button.save"
       />
     </span>
-  </LoadingWrapper>
+  </Memo(LoadingWrapper)>
 </button>
 `;
diff --git a/webapp/channels/src/components/__snapshots__/setting_picture.test.tsx.snap b/webapp/channels/src/components/__snapshots__/setting_picture.test.tsx.snap
index 2272027821..e35663fac2 100644
--- a/webapp/channels/src/components/__snapshots__/setting_picture.test.tsx.snap
+++ b/webapp/channels/src/components/__snapshots__/setting_picture.test.tsx.snap
@@ -87,7 +87,7 @@ exports[`components/SettingItemMin should match snapshot with active Save button
             onClick={[Function]}
             tabIndex={0}
           >
-            <LoadingWrapper
+            <Memo(LoadingWrapper)
               loading={false}
               text="Uploading..."
             >
@@ -95,7 +95,7 @@ exports[`components/SettingItemMin should match snapshot with active Save button
                 defaultMessage="Save"
                 id="setting_picture.save"
               />
-            </LoadingWrapper>
+            </Memo(LoadingWrapper)>
           </button>
         </span>
         <button
@@ -192,7 +192,7 @@ exports[`components/SettingItemMin should match snapshot with active Save button
             onClick={[Function]}
             tabIndex={0}
           >
-            <LoadingWrapper
+            <Memo(LoadingWrapper)
               loading={false}
               text="Uploading..."
             >
@@ -200,7 +200,7 @@ exports[`components/SettingItemMin should match snapshot with active Save button
                 defaultMessage="Save"
                 id="setting_picture.save"
               />
-            </LoadingWrapper>
+            </Memo(LoadingWrapper)>
           </button>
         </span>
         <button
@@ -307,7 +307,7 @@ exports[`components/SettingItemMin should match snapshot, on loading picture 1`]
             onClick={[Function]}
             tabIndex={-1}
           >
-            <LoadingWrapper
+            <Memo(LoadingWrapper)
               loading={true}
               text="Uploading..."
             >
@@ -315,7 +315,7 @@ exports[`components/SettingItemMin should match snapshot, on loading picture 1`]
                 defaultMessage="Save"
                 id="setting_picture.save"
               />
-            </LoadingWrapper>
+            </Memo(LoadingWrapper)>
           </button>
         </span>
         <button
@@ -434,7 +434,7 @@ exports[`components/SettingItemMin should match snapshot, profile picture on fil
             onClick={[Function]}
             tabIndex={-1}
           >
-            <LoadingWrapper
+            <Memo(LoadingWrapper)
               loading={false}
               text="Uploading..."
             >
@@ -442,7 +442,7 @@ exports[`components/SettingItemMin should match snapshot, profile picture on fil
                 defaultMessage="Save"
                 id="setting_picture.save"
               />
-            </LoadingWrapper>
+            </Memo(LoadingWrapper)>
           </button>
         </span>
         <button
@@ -549,7 +549,7 @@ exports[`components/SettingItemMin should match snapshot, profile picture on sou
             onClick={[Function]}
             tabIndex={-1}
           >
-            <LoadingWrapper
+            <Memo(LoadingWrapper)
               loading={false}
               text="Uploading..."
             >
@@ -557,7 +557,7 @@ exports[`components/SettingItemMin should match snapshot, profile picture on sou
                 defaultMessage="Save"
                 id="setting_picture.save"
               />
-            </LoadingWrapper>
+            </Memo(LoadingWrapper)>
           </button>
         </span>
         <button
@@ -676,7 +676,7 @@ exports[`components/SettingItemMin should match snapshot, team icon on file 1`]
             onClick={[Function]}
             tabIndex={-1}
           >
-            <LoadingWrapper
+            <Memo(LoadingWrapper)
               loading={false}
               text="Uploading..."
             >
@@ -684,7 +684,7 @@ exports[`components/SettingItemMin should match snapshot, team icon on file 1`]
                 defaultMessage="Save"
                 id="setting_picture.save"
               />
-            </LoadingWrapper>
+            </Memo(LoadingWrapper)>
           </button>
         </span>
         <button
@@ -845,7 +845,7 @@ exports[`components/SettingItemMin should match snapshot, team icon on source 1`
             onClick={[Function]}
             tabIndex={-1}
           >
-            <LoadingWrapper
+            <Memo(LoadingWrapper)
               loading={false}
               text="Uploading..."
             >
@@ -853,7 +853,7 @@ exports[`components/SettingItemMin should match snapshot, team icon on source 1`
                 defaultMessage="Save"
                 id="setting_picture.save"
               />
-            </LoadingWrapper>
+            </Memo(LoadingWrapper)>
           </button>
         </span>
         <button
@@ -1014,7 +1014,7 @@ exports[`components/SettingItemMin should match snapshot, user icon on source 1`
             onClick={[Function]}
             tabIndex={-1}
           >
-            <LoadingWrapper
+            <Memo(LoadingWrapper)
               loading={false}
               text="Uploading..."
             >
@@ -1022,7 +1022,7 @@ exports[`components/SettingItemMin should match snapshot, user icon on source 1`
                 defaultMessage="Save"
                 id="setting_picture.save"
               />
-            </LoadingWrapper>
+            </Memo(LoadingWrapper)>
           </button>
         </span>
         <button
diff --git a/webapp/channels/src/components/__snapshots__/spinner_button.test.tsx.snap b/webapp/channels/src/components/__snapshots__/spinner_button.test.tsx.snap
index 728c28fd2b..7bdc51bb32 100644
--- a/webapp/channels/src/components/__snapshots__/spinner_button.test.tsx.snap
+++ b/webapp/channels/src/components/__snapshots__/spinner_button.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`components/SpinnerButton should match snapshot with children 1`] = `
 <button
   disabled={false}
 >
-  <LoadingWrapper
+  <Memo(LoadingWrapper)
     loading={false}
     text="Test"
   >
@@ -14,7 +14,7 @@ exports[`components/SpinnerButton should match snapshot with children 1`] = `
     <span
       id="child2"
     />
-  </LoadingWrapper>
+  </Memo(LoadingWrapper)>
 </button>
 `;
 
@@ -22,7 +22,7 @@ exports[`components/SpinnerButton should match snapshot with required props 1`]
 <button
   disabled={false}
 >
-  <LoadingWrapper
+  <Memo(LoadingWrapper)
     loading={false}
     text="Test"
   />
@@ -33,7 +33,7 @@ exports[`components/SpinnerButton should match snapshot with spinning 1`] = `
 <button
   disabled={true}
 >
-  <LoadingWrapper
+  <Memo(LoadingWrapper)
     loading={true}
     text="Test"
   />
diff --git a/webapp/channels/src/components/admin_console/permission_schemes_settings/permissions_scheme_summary/__snapshots__/permissions_scheme_summary.test.tsx.snap b/webapp/channels/src/components/admin_console/permission_schemes_settings/permissions_scheme_summary/__snapshots__/permissions_scheme_summary.test.tsx.snap
index 21b25428b0..57e78b48a0 100644
--- a/webapp/channels/src/components/admin_console/permission_schemes_settings/permissions_scheme_summary/__snapshots__/permissions_scheme_summary.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/permission_schemes_settings/permissions_scheme_summary/__snapshots__/permissions_scheme_summary.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`components/admin_console/permission_schemes_settings/permissions_scheme
     <ConfirmModal
       confirmButtonClass="btn btn-primary"
       confirmButtonText={
-        <LoadingWrapper
+        <Memo(LoadingWrapper)
           loading={false}
           text="Deleting..."
         >
@@ -20,7 +20,7 @@ exports[`components/admin_console/permission_schemes_settings/permissions_scheme
             defaultMessage="Yes, Delete"
             id="admin.permissions.permissionsSchemeSummary.deleteConfirmButton"
           />
-        </LoadingWrapper>
+        </Memo(LoadingWrapper)>
       }
       message={
         <div>
@@ -130,7 +130,7 @@ exports[`components/admin_console/permission_schemes_settings/permissions_scheme
     <ConfirmModal
       confirmButtonClass="btn btn-primary"
       confirmButtonText={
-        <LoadingWrapper
+        <Memo(LoadingWrapper)
           loading={false}
           text="Deleting..."
         >
@@ -138,7 +138,7 @@ exports[`components/admin_console/permission_schemes_settings/permissions_scheme
             defaultMessage="Yes, Delete"
             id="admin.permissions.permissionsSchemeSummary.deleteConfirmButton"
           />
-        </LoadingWrapper>
+        </Memo(LoadingWrapper)>
       }
       message={
         <div>
@@ -321,7 +321,7 @@ exports[`components/admin_console/permission_schemes_settings/permissions_scheme
     <ConfirmModal
       confirmButtonClass="btn btn-primary"
       confirmButtonText={
-        <LoadingWrapper
+        <Memo(LoadingWrapper)
           loading={false}
           text="Deleting..."
         >
@@ -329,7 +329,7 @@ exports[`components/admin_console/permission_schemes_settings/permissions_scheme
             defaultMessage="Yes, Delete"
             id="admin.permissions.permissionsSchemeSummary.deleteConfirmButton"
           />
-        </LoadingWrapper>
+        </Memo(LoadingWrapper)>
       }
       message={
         <div>
diff --git a/webapp/channels/src/components/admin_console/request_button/__snapshots__/request_button.test.tsx.snap b/webapp/channels/src/components/admin_console/request_button/__snapshots__/request_button.test.tsx.snap
index b17572098d..ab6604bd06 100644
--- a/webapp/channels/src/components/admin_console/request_button/__snapshots__/request_button.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/request_button/__snapshots__/request_button.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`components/admin_console/request_button/request_button.jsx should match
         onClick={[Function]}
         type="button"
       >
-        <LoadingWrapper
+        <Memo(LoadingWrapper)
           loading={false}
           text="Loading..."
         >
@@ -22,7 +22,7 @@ exports[`components/admin_console/request_button/request_button.jsx should match
             defaultMessage="Button Text"
             id="test2"
           />
-        </LoadingWrapper>
+        </Memo(LoadingWrapper)>
       </button>
     </div>
     <div
@@ -97,7 +97,7 @@ exports[`components/admin_console/request_button/request_button.jsx should match
           onClick={[Function]}
           type="button"
         >
-          <LoadingWrapper
+          <Memo(LoadingWrapper)
             loading={false}
             text="Loading..."
           >
@@ -109,7 +109,7 @@ exports[`components/admin_console/request_button/request_button.jsx should match
                 Button Text
               </span>
             </FormattedMessage>
-          </LoadingWrapper>
+          </Memo(LoadingWrapper)>
         </button>
         <div>
           <div
@@ -234,7 +234,7 @@ exports[`components/admin_console/request_button/request_button.jsx should match
           onClick={[Function]}
           type="button"
         >
-          <LoadingWrapper
+          <Memo(LoadingWrapper)
             loading={false}
             text="Loading..."
           >
@@ -246,7 +246,7 @@ exports[`components/admin_console/request_button/request_button.jsx should match
                 Button Text
               </span>
             </FormattedMessage>
-          </LoadingWrapper>
+          </Memo(LoadingWrapper)>
         </button>
         <div>
           <div
@@ -363,7 +363,7 @@ exports[`components/admin_console/request_button/request_button.jsx should match
           onClick={[Function]}
           type="button"
         >
-          <LoadingWrapper
+          <Memo(LoadingWrapper)
             loading={false}
             text="Loading..."
           >
@@ -375,7 +375,7 @@ exports[`components/admin_console/request_button/request_button.jsx should match
                 Button Text
               </span>
             </FormattedMessage>
-          </LoadingWrapper>
+          </Memo(LoadingWrapper)>
         </button>
         <div>
           <div
@@ -493,7 +493,7 @@ exports[`components/admin_console/request_button/request_button.jsx should match
           onClick={[Function]}
           type="button"
         >
-          <LoadingWrapper
+          <Memo(LoadingWrapper)
             loading={false}
             text="Loading..."
           >
@@ -505,7 +505,7 @@ exports[`components/admin_console/request_button/request_button.jsx should match
                 Button Text
               </span>
             </FormattedMessage>
-          </LoadingWrapper>
+          </Memo(LoadingWrapper)>
         </button>
       </div>
       <div
diff --git a/webapp/channels/src/components/plugin_marketplace/marketplace_item/marketplace_item_app/__snapshots__/marketplace_item_app.test.tsx.snap b/webapp/channels/src/components/plugin_marketplace/marketplace_item/marketplace_item_app/__snapshots__/marketplace_item_app.test.tsx.snap
index 7fb956f716..2ec23610e1 100644
--- a/webapp/channels/src/components/plugin_marketplace/marketplace_item/marketplace_item_app/__snapshots__/marketplace_item_app.test.tsx.snap
+++ b/webapp/channels/src/components/plugin_marketplace/marketplace_item/marketplace_item_app/__snapshots__/marketplace_item_app.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`components/MarketplaceItemApp MarketplaceItem should render 1`] = `
         disabled={false}
         onClick={[Function]}
       >
-        <LoadingWrapper
+        <Memo(LoadingWrapper)
           loading={false}
           text="Installing..."
         >
@@ -23,7 +23,7 @@ exports[`components/MarketplaceItemApp MarketplaceItem should render 1`] = `
             defaultMessage="Install"
             id="marketplace_modal.list.install"
           />
-        </LoadingWrapper>
+        </Memo(LoadingWrapper)>
       </button>
     }
     description="test plugin"
@@ -87,7 +87,7 @@ exports[`components/MarketplaceItemApp MarketplaceItem should render with empty
         disabled={false}
         onClick={[Function]}
       >
-        <LoadingWrapper
+        <Memo(LoadingWrapper)
           loading={false}
           text="Installing..."
         >
@@ -95,7 +95,7 @@ exports[`components/MarketplaceItemApp MarketplaceItem should render with empty
             defaultMessage="Install"
             id="marketplace_modal.list.install"
           />
-        </LoadingWrapper>
+        </Memo(LoadingWrapper)>
       </button>
     }
     description="test plugin"
@@ -127,7 +127,7 @@ exports[`components/MarketplaceItemApp MarketplaceItem should render with icon 1
         disabled={false}
         onClick={[Function]}
       >
-        <LoadingWrapper
+        <Memo(LoadingWrapper)
           loading={false}
           text="Installing..."
         >
@@ -135,7 +135,7 @@ exports[`components/MarketplaceItemApp MarketplaceItem should render with icon 1
             defaultMessage="Install"
             id="marketplace_modal.list.install"
           />
-        </LoadingWrapper>
+        </Memo(LoadingWrapper)>
       </button>
     }
     description="test plugin"
@@ -168,7 +168,7 @@ exports[`components/MarketplaceItemApp MarketplaceItem should render with no hom
         disabled={false}
         onClick={[Function]}
       >
-        <LoadingWrapper
+        <Memo(LoadingWrapper)
           loading={false}
           text="Installing..."
         >
@@ -176,7 +176,7 @@ exports[`components/MarketplaceItemApp MarketplaceItem should render with no hom
             defaultMessage="Install"
             id="marketplace_modal.list.install"
           />
-        </LoadingWrapper>
+        </Memo(LoadingWrapper)>
       </button>
     }
     description="test plugin"
@@ -206,7 +206,7 @@ exports[`components/MarketplaceItemApp MarketplaceItem should render with no plu
         disabled={false}
         onClick={[Function]}
       >
-        <LoadingWrapper
+        <Memo(LoadingWrapper)
           loading={false}
           text="Installing..."
         >
@@ -214,7 +214,7 @@ exports[`components/MarketplaceItemApp MarketplaceItem should render with no plu
             defaultMessage="Install"
             id="marketplace_modal.list.install"
           />
-        </LoadingWrapper>
+        </Memo(LoadingWrapper)>
       </button>
     }
     homepageUrl="http://example.com"
@@ -244,7 +244,7 @@ exports[`components/MarketplaceItemApp MarketplaceItem should render with one la
         disabled={false}
         onClick={[Function]}
       >
-        <LoadingWrapper
+        <Memo(LoadingWrapper)
           loading={false}
           text="Installing..."
         >
@@ -252,7 +252,7 @@ exports[`components/MarketplaceItemApp MarketplaceItem should render with one la
             defaultMessage="Install"
             id="marketplace_modal.list.install"
           />
-        </LoadingWrapper>
+        </Memo(LoadingWrapper)>
       </button>
     }
     description="test plugin"
@@ -292,7 +292,7 @@ exports[`components/MarketplaceItemApp MarketplaceItem should render with server
         disabled={false}
         onClick={[Function]}
       >
-        <LoadingWrapper
+        <Memo(LoadingWrapper)
           loading={false}
           text="Installing..."
         >
@@ -300,7 +300,7 @@ exports[`components/MarketplaceItemApp MarketplaceItem should render with server
             defaultMessage="Try Again"
             id="marketplace_modal.list.try_again"
           />
-        </LoadingWrapper>
+        </Memo(LoadingWrapper)>
       </button>
     }
     description="test plugin"
@@ -332,7 +332,7 @@ exports[`components/MarketplaceItemApp MarketplaceItem should render with two la
         disabled={false}
         onClick={[Function]}
       >
-        <LoadingWrapper
+        <Memo(LoadingWrapper)
           loading={false}
           text="Installing..."
         >
@@ -340,7 +340,7 @@ exports[`components/MarketplaceItemApp MarketplaceItem should render with two la
             defaultMessage="Install"
             id="marketplace_modal.list.install"
           />
-        </LoadingWrapper>
+        </Memo(LoadingWrapper)>
       </button>
     }
     description="test plugin"
@@ -385,7 +385,7 @@ exports[`components/MarketplaceItemApp MarketplaceItem when installing 1`] = `
         disabled={false}
         onClick={[Function]}
       >
-        <LoadingWrapper
+        <Memo(LoadingWrapper)
           loading={false}
           text="Installing..."
         >
@@ -393,7 +393,7 @@ exports[`components/MarketplaceItemApp MarketplaceItem when installing 1`] = `
             defaultMessage="Install"
             id="marketplace_modal.list.install"
           />
-        </LoadingWrapper>
+        </Memo(LoadingWrapper)>
       </button>
     }
     description="test plugin"
diff --git a/webapp/channels/src/components/plugin_marketplace/marketplace_item/marketplace_item_plugin/__snapshots__/marketplace_item_plugin.test.tsx.snap b/webapp/channels/src/components/plugin_marketplace/marketplace_item/marketplace_item_plugin/__snapshots__/marketplace_item_plugin.test.tsx.snap
index 2c38fb3f73..2a57315698 100644
--- a/webapp/channels/src/components/plugin_marketplace/marketplace_item/marketplace_item_plugin/__snapshots__/marketplace_item_plugin.test.tsx.snap
+++ b/webapp/channels/src/components/plugin_marketplace/marketplace_item/marketplace_item_plugin/__snapshots__/marketplace_item_plugin.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`components/MarketplaceItemPlugin MarketplaceItem should render 1`] = `
         disabled={false}
         onClick={[Function]}
       >
-        <LoadingWrapper
+        <Memo(LoadingWrapper)
           loading={false}
           text="Installing..."
         >
@@ -23,7 +23,7 @@ exports[`components/MarketplaceItemPlugin MarketplaceItem should render 1`] = `
             defaultMessage="Install"
             id="marketplace_modal.list.install"
           />
-        </LoadingWrapper>
+        </Memo(LoadingWrapper)>
       </button>
     }
     description="test plugin"
@@ -141,7 +141,7 @@ exports[`components/MarketplaceItemPlugin MarketplaceItem should render with emp
         disabled={false}
         onClick={[Function]}
       >
-        <LoadingWrapper
+        <Memo(LoadingWrapper)
           loading={false}
           text="Installing..."
         >
@@ -149,7 +149,7 @@ exports[`components/MarketplaceItemPlugin MarketplaceItem should render with emp
             defaultMessage="Install"
             id="marketplace_modal.list.install"
           />
-        </LoadingWrapper>
+        </Memo(LoadingWrapper)>
       </button>
     }
     description="test plugin"
@@ -206,7 +206,7 @@ exports[`components/MarketplaceItemPlugin MarketplaceItem should render with no
         disabled={false}
         onClick={[Function]}
       >
-        <LoadingWrapper
+        <Memo(LoadingWrapper)
           loading={false}
           text="Installing..."
         >
@@ -214,7 +214,7 @@ exports[`components/MarketplaceItemPlugin MarketplaceItem should render with no
             defaultMessage="Install"
             id="marketplace_modal.list.install"
           />
-        </LoadingWrapper>
+        </Memo(LoadingWrapper)>
       </button>
     }
     description="test plugin"
@@ -269,7 +269,7 @@ exports[`components/MarketplaceItemPlugin MarketplaceItem should render with no
         disabled={false}
         onClick={[Function]}
       >
-        <LoadingWrapper
+        <Memo(LoadingWrapper)
           loading={false}
           text="Installing..."
         >
@@ -277,7 +277,7 @@ exports[`components/MarketplaceItemPlugin MarketplaceItem should render with no
             defaultMessage="Install"
             id="marketplace_modal.list.install"
           />
-        </LoadingWrapper>
+        </Memo(LoadingWrapper)>
       </button>
     }
     homepageUrl="http://example.com"
@@ -332,7 +332,7 @@ exports[`components/MarketplaceItemPlugin MarketplaceItem should render with no
         disabled={false}
         onClick={[Function]}
       >
-        <LoadingWrapper
+        <Memo(LoadingWrapper)
           loading={false}
           text="Installing..."
         >
@@ -340,7 +340,7 @@ exports[`components/MarketplaceItemPlugin MarketplaceItem should render with no
             defaultMessage="Install"
             id="marketplace_modal.list.install"
           />
-        </LoadingWrapper>
+        </Memo(LoadingWrapper)>
       </button>
     }
     description="test plugin"
@@ -394,7 +394,7 @@ exports[`components/MarketplaceItemPlugin MarketplaceItem should render with one
         disabled={false}
         onClick={[Function]}
       >
-        <LoadingWrapper
+        <Memo(LoadingWrapper)
           loading={false}
           text="Installing..."
         >
@@ -402,7 +402,7 @@ exports[`components/MarketplaceItemPlugin MarketplaceItem should render with one
             defaultMessage="Install"
             id="marketplace_modal.list.install"
           />
-        </LoadingWrapper>
+        </Memo(LoadingWrapper)>
       </button>
     }
     description="test plugin"
@@ -467,7 +467,7 @@ exports[`components/MarketplaceItemPlugin MarketplaceItem should render with plu
         disabled={false}
         onClick={[Function]}
       >
-        <LoadingWrapper
+        <Memo(LoadingWrapper)
           loading={false}
           text="Installing..."
         >
@@ -475,7 +475,7 @@ exports[`components/MarketplaceItemPlugin MarketplaceItem should render with plu
             defaultMessage="Install"
             id="marketplace_modal.list.install"
           />
-        </LoadingWrapper>
+        </Memo(LoadingWrapper)>
       </button>
     }
     description="test plugin"
@@ -544,7 +544,7 @@ exports[`components/MarketplaceItemPlugin MarketplaceItem should render with ser
         disabled={false}
         onClick={[Function]}
       >
-        <LoadingWrapper
+        <Memo(LoadingWrapper)
           loading={false}
           text="Installing..."
         >
@@ -552,7 +552,7 @@ exports[`components/MarketplaceItemPlugin MarketplaceItem should render with ser
             defaultMessage="Try Again"
             id="marketplace_modal.list.try_again"
           />
-        </LoadingWrapper>
+        </Memo(LoadingWrapper)>
       </button>
     }
     description="test plugin"
@@ -609,7 +609,7 @@ exports[`components/MarketplaceItemPlugin MarketplaceItem should render with two
         disabled={false}
         onClick={[Function]}
       >
-        <LoadingWrapper
+        <Memo(LoadingWrapper)
           loading={false}
           text="Installing..."
         >
@@ -617,7 +617,7 @@ exports[`components/MarketplaceItemPlugin MarketplaceItem should render with two
             defaultMessage="Install"
             id="marketplace_modal.list.install"
           />
-        </LoadingWrapper>
+        </Memo(LoadingWrapper)>
       </button>
     }
     description="test plugin"
diff --git a/webapp/channels/src/components/user_settings/notifications/email_notification_setting/__snapshots__/email_notification_setting.test.tsx.snap b/webapp/channels/src/components/user_settings/notifications/email_notification_setting/__snapshots__/email_notification_setting.test.tsx.snap
index acb761b96f..bac7f86fb9 100644
--- a/webapp/channels/src/components/user_settings/notifications/email_notification_setting/__snapshots__/email_notification_setting.test.tsx.snap
+++ b/webapp/channels/src/components/user_settings/notifications/email_notification_setting/__snapshots__/email_notification_setting.test.tsx.snap
@@ -221,7 +221,7 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
                 onClick={[Function]}
                 type="submit"
               >
-                <LoadingWrapper
+                <Memo(LoadingWrapper)
                   loading={false}
                   text={
                     <Memo(MemoizedFormattedMessage)
@@ -240,7 +240,7 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
                       </span>
                     </FormattedMessage>
                   </span>
-                </LoadingWrapper>
+                </Memo(LoadingWrapper)>
               </button>
             </SaveButton>
             <button
@@ -638,7 +638,7 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
                 onClick={[Function]}
                 type="submit"
               >
-                <LoadingWrapper
+                <Memo(LoadingWrapper)
                   loading={false}
                   text={
                     <Memo(MemoizedFormattedMessage)
@@ -657,7 +657,7 @@ exports[`components/user_settings/notifications/EmailNotificationSetting should
                       </span>
                     </FormattedMessage>
                   </span>
-                </LoadingWrapper>
+                </Memo(LoadingWrapper)>
               </button>
             </SaveButton>
             <button
diff --git a/webapp/channels/src/components/user_settings/notifications/manage_auto_responder/__snapshots__/manage_auto_responder.test.tsx.snap b/webapp/channels/src/components/user_settings/notifications/manage_auto_responder/__snapshots__/manage_auto_responder.test.tsx.snap
index 8b2fc96322..85742efd15 100644
--- a/webapp/channels/src/components/user_settings/notifications/manage_auto_responder/__snapshots__/manage_auto_responder.test.tsx.snap
+++ b/webapp/channels/src/components/user_settings/notifications/manage_auto_responder/__snapshots__/manage_auto_responder.test.tsx.snap
@@ -148,7 +148,7 @@ exports[`components/user_settings/notifications/ManageAutoResponder should match
                 onClick={[Function]}
                 type="submit"
               >
-                <LoadingWrapper
+                <Memo(LoadingWrapper)
                   loading={false}
                   text={
                     <Memo(MemoizedFormattedMessage)
@@ -167,7 +167,7 @@ exports[`components/user_settings/notifications/ManageAutoResponder should match
                       </span>
                     </FormattedMessage>
                   </span>
-                </LoadingWrapper>
+                </Memo(LoadingWrapper)>
               </button>
             </SaveButton>
             <button
@@ -385,7 +385,7 @@ exports[`components/user_settings/notifications/ManageAutoResponder should match
                 onClick={[Function]}
                 type="submit"
               >
-                <LoadingWrapper
+                <Memo(LoadingWrapper)
                   loading={false}
                   text={
                     <Memo(MemoizedFormattedMessage)
@@ -404,7 +404,7 @@ exports[`components/user_settings/notifications/ManageAutoResponder should match
                       </span>
                     </FormattedMessage>
                   </span>
-                </LoadingWrapper>
+                </Memo(LoadingWrapper)>
               </button>
             </SaveButton>
             <button
diff --git a/webapp/channels/src/components/warn_metric_ack_modal/__snapshots__/warn_metric_ack_modal.test.tsx.snap b/webapp/channels/src/components/warn_metric_ack_modal/__snapshots__/warn_metric_ack_modal.test.tsx.snap
index 9b5b99568c..5a0defd744 100644
--- a/webapp/channels/src/components/warn_metric_ack_modal/__snapshots__/warn_metric_ack_modal.test.tsx.snap
+++ b/webapp/channels/src/components/warn_metric_ack_modal/__snapshots__/warn_metric_ack_modal.test.tsx.snap
@@ -109,7 +109,7 @@ exports[`components/WarnMetricAckModal error display 1`] = `
       disabled={false}
       onClick={[Function]}
     >
-      <LoadingWrapper
+      <Memo(LoadingWrapper)
         loading={false}
         text="Sending email"
       >
@@ -117,7 +117,7 @@ exports[`components/WarnMetricAckModal error display 1`] = `
           defaultMessage="Acknowledge"
           id="warn_metric_ack_modal.contact_support"
         />
-      </LoadingWrapper>
+      </Memo(LoadingWrapper)>
     </button>
   </ModalFooter>
 </Modal>
@@ -208,7 +208,7 @@ exports[`components/WarnMetricAckModal should match snapshot, init 1`] = `
       disabled={false}
       onClick={[Function]}
     >
-      <LoadingWrapper
+      <Memo(LoadingWrapper)
         loading={false}
         text="Sending email"
       >
@@ -216,7 +216,7 @@ exports[`components/WarnMetricAckModal should match snapshot, init 1`] = `
           defaultMessage="Acknowledge"
           id="warn_metric_ack_modal.contact_support"
         />
-      </LoadingWrapper>
+      </Memo(LoadingWrapper)>
     </button>
   </ModalFooter>
 </Modal>
diff --git a/webapp/channels/src/components/widgets/loading/__snapshots__/loading_wrapper.test.tsx.snap b/webapp/channels/src/components/widgets/loading/__snapshots__/loading_wrapper.test.tsx.snap
new file mode 100644
index 0000000000..34bad6be62
--- /dev/null
+++ b/webapp/channels/src/components/widgets/loading/__snapshots__/loading_wrapper.test.tsx.snap
@@ -0,0 +1,81 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/widgets/loading/LoadingWrapper showing content with children 1`] = `
+<Memo(LoadingWrapper)
+  loading={false}
+>
+  text
+</Memo(LoadingWrapper)>
+`;
+
+exports[`components/widgets/loading/LoadingWrapper showing content without children 1`] = `
+<Memo(LoadingWrapper)
+  loading={false}
+/>
+`;
+
+exports[`components/widgets/loading/LoadingWrapper showing spinner with text 1`] = `
+<Memo(LoadingWrapper)
+  loading={true}
+  text="test"
+>
+  <LoadingSpinner
+    text="test"
+  >
+    <span
+      className="LoadingSpinner with-text"
+      data-testid="loadingSpinner"
+      id="loadingSpinner"
+    >
+      <LocalizedIcon
+        className="fa fa-spinner fa-fw fa-pulse spinner"
+        component="span"
+        title={
+          Object {
+            "defaultMessage": "Loading Icon",
+            "id": "generic_icons.loading",
+          }
+        }
+      >
+        <span
+          className="fa fa-spinner fa-fw fa-pulse spinner"
+          title="Loading Icon"
+        />
+      </LocalizedIcon>
+      test
+    </span>
+  </LoadingSpinner>
+</Memo(LoadingWrapper)>
+`;
+
+exports[`components/widgets/loading/LoadingWrapper showing spinner without text 1`] = `
+<Memo(LoadingWrapper)
+  loading={true}
+>
+  <LoadingSpinner
+    text={null}
+  >
+    <span
+      className="LoadingSpinner"
+      data-testid="loadingSpinner"
+      id="loadingSpinner"
+    >
+      <LocalizedIcon
+        className="fa fa-spinner fa-fw fa-pulse spinner"
+        component="span"
+        title={
+          Object {
+            "defaultMessage": "Loading Icon",
+            "id": "generic_icons.loading",
+          }
+        }
+      >
+        <span
+          className="fa fa-spinner fa-fw fa-pulse spinner"
+          title="Loading Icon"
+        />
+      </LocalizedIcon>
+    </span>
+  </LoadingSpinner>
+</Memo(LoadingWrapper)>
+`;
diff --git a/webapp/channels/src/components/widgets/loading/loading_wrapper.test.tsx b/webapp/channels/src/components/widgets/loading/loading_wrapper.test.tsx
index 09089ce140..fc76b35386 100644
--- a/webapp/channels/src/components/widgets/loading/loading_wrapper.test.tsx
+++ b/webapp/channels/src/components/widgets/loading/loading_wrapper.test.tsx
@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import {shallow} from 'enzyme';
+import {mount} from 'enzyme';
 import React from 'react';
 
 import LoadingWrapper from './loading_wrapper';
@@ -13,37 +13,25 @@ describe('components/widgets/loading/LoadingWrapper', () => {
             loading: true,
             text: 'test',
             children: 'children',
-            snapshot: `
-<LoadingSpinner
-  text="test"
-/>
-`,
         },
         {
             name: 'showing spinner without text',
             loading: true,
             children: 'text',
-            snapshot: `
-<LoadingSpinner
-  text={null}
-/>
-`,
         },
         {
             name: 'showing content with children',
             loading: false,
             children: 'text',
-            snapshot: '"text"',
         },
         {
             name: 'showing content without children',
             loading: false,
-            snapshot: '""',
         },
     ];
     for (const testCase of testCases) {
         test(testCase.name, () => {
-            const wrapper = shallow(
+            const wrapper = mount(
                 <LoadingWrapper
                     loading={testCase.loading}
                     text={testCase.text}
@@ -51,7 +39,7 @@ describe('components/widgets/loading/LoadingWrapper', () => {
                     {testCase.children}
                 </LoadingWrapper>,
             );
-            expect(wrapper).toMatchInlineSnapshot(testCase.snapshot);
+            expect(wrapper).toMatchSnapshot();
         });
     }
 });
diff --git a/webapp/channels/src/components/widgets/loading/loading_wrapper.tsx b/webapp/channels/src/components/widgets/loading/loading_wrapper.tsx
index a26869d08f..91771aa58f 100644
--- a/webapp/channels/src/components/widgets/loading/loading_wrapper.tsx
+++ b/webapp/channels/src/components/widgets/loading/loading_wrapper.tsx
@@ -6,24 +6,17 @@ import React from 'react';
 import LoadingSpinner from './loading_spinner';
 
 type Props = {
-    loading: boolean;
-    text: React.ReactNode;
-    children: React.ReactNode;
+    loading?: boolean;
+    text?: React.ReactNode;
+    children?: React.ReactNode;
 }
 
-export default class LoadingWrapper extends React.PureComponent<Props> {
-    public static defaultProps: Props = {
-        loading: true,
-        text: null,
-        children: null,
-    };
+const LoadingWrapper = ({loading = true, text = null, children = null}: Props) => {
+    return (
+        <>
+            {loading ? <LoadingSpinner text={text}/> : children}
+        </>
+    );
+};
 
-    public render() {
-        const {text, loading, children} = this.props;
-        if (!loading) {
-            return children;
-        }
-
-        return <LoadingSpinner text={text}/>;
-    }
-}
+export default React.memo(LoadingWrapper);