Convert ./components/widgets/loading/loading_wrapper.tsx from Class C… (#24997)

* 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>
2023-10-26 01:20:26 +05:30
--- 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>
 `;
--- 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
--- 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"
  />
--- 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>
--- 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
--- 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"
--- 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"
--- 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
--- 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
--- 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>
--- 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
@@ -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)>
+`;
--- 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();
        });
    }
 });
--- 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);