diff --git a/webapp/channels/src/components/__snapshots__/loading_image_preview.test.tsx.snap b/webapp/channels/src/components/__snapshots__/loading_image_preview.test.tsx.snap
index daef7ac95a..78a8dbb052 100644
--- a/webapp/channels/src/components/__snapshots__/loading_image_preview.test.tsx.snap
+++ b/webapp/channels/src/components/__snapshots__/loading_image_preview.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`components/LoadingImagePreview should match snapshot 1`] = `
 <div
   className="view-image__loading"
 >
-  <injectIntl(LoadingSpinner) />
+  <Memo(LoadingSpinner) />
   <span
     className="loader-percent"
   >
@@ -17,7 +17,7 @@ exports[`components/LoadingImagePreview should match snapshot 2`] = `
 <div
   className="view-image__loading"
 >
-  <injectIntl(LoadingSpinner) />
+  <Memo(LoadingSpinner) />
   <span
     className="loader-percent"
   >
diff --git a/webapp/channels/src/components/__snapshots__/pdf_preview.test.jsx.snap b/webapp/channels/src/components/__snapshots__/pdf_preview.test.jsx.snap
index 3bb96304b6..88f60c7450 100644
--- a/webapp/channels/src/components/__snapshots__/pdf_preview.test.jsx.snap
+++ b/webapp/channels/src/components/__snapshots__/pdf_preview.test.jsx.snap
@@ -4,7 +4,7 @@ exports[`component/PDFPreview should match snapshot, loading 1`] = `
 <div
   className="view-image__loading"
 >
-  <injectIntl(LoadingSpinner) />
+  <Memo(LoadingSpinner) />
 </div>
 `;
 
diff --git a/webapp/channels/src/components/admin_console/data_grid/__snapshots__/data_grid.test.tsx.snap b/webapp/channels/src/components/admin_console/data_grid/__snapshots__/data_grid.test.tsx.snap
index e0291b7061..45aed720b5 100644
--- a/webapp/channels/src/components/admin_console/data_grid/__snapshots__/data_grid.test.tsx.snap
+++ b/webapp/channels/src/components/admin_console/data_grid/__snapshots__/data_grid.test.tsx.snap
@@ -19,7 +19,7 @@ exports[`components/admin_console/data_grid/DataGrid should match snapshot while
     <div
       className="DataGrid_loading"
     >
-      <injectIntl(LoadingSpinner) />
+      <Memo(LoadingSpinner) />
       <MemoizedFormattedMessage
         defaultMessage="Loading"
         id="admin.data_grid.loading"
diff --git a/webapp/channels/src/components/apps_form/__snapshots__/apps_form_component.test.tsx.snap b/webapp/channels/src/components/apps_form/__snapshots__/apps_form_component.test.tsx.snap
index 75de35fe3b..5cb86c1d85 100644
--- a/webapp/channels/src/components/apps_form/__snapshots__/apps_form_component.test.tsx.snap
+++ b/webapp/channels/src/components/apps_form/__snapshots__/apps_form_component.test.tsx.snap
@@ -75,7 +75,7 @@ exports[`AppsFormComponent should set match snapshot 1`] = `
         <div
           className="apps-form-modal-body-common apps-form-modal-body-loaded"
         >
-          <injectIntl(LoadingSpinner)
+          <Memo(LoadingSpinner)
             style={
               Object {
                 "fontSize": "24px",
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
index 21def44daa..f3c0eb2ea8 100644
--- 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
@@ -19,64 +19,21 @@ exports[`components/widgets/loading/LoadingWrapper showing spinner with text 1`]
   loading={true}
   text="test"
 >
-  <injectIntl(LoadingSpinner)
+  <Memo(LoadingSpinner)
     text="test"
   >
-    <LoadingSpinner
-      intl={
-        Object {
-          "$t": [Function],
-          "defaultFormats": Object {},
-          "defaultLocale": "en",
-          "defaultRichTextElements": undefined,
-          "fallbackOnEmptyString": true,
-          "formatDate": [Function],
-          "formatDateTimeRange": [Function],
-          "formatDateToParts": [Function],
-          "formatDisplayName": [Function],
-          "formatList": [Function],
-          "formatListToParts": [Function],
-          "formatMessage": [Function],
-          "formatNumber": [Function],
-          "formatNumberToParts": [Function],
-          "formatPlural": [Function],
-          "formatRelativeTime": [Function],
-          "formatTime": [Function],
-          "formatTimeToParts": [Function],
-          "formats": Object {},
-          "formatters": Object {
-            "getDateTimeFormat": [Function],
-            "getDisplayNames": [Function],
-            "getListFormat": [Function],
-            "getMessageFormat": [Function],
-            "getNumberFormat": [Function],
-            "getPluralRules": [Function],
-            "getRelativeTimeFormat": [Function],
-          },
-          "locale": "en",
-          "messages": Object {},
-          "onError": [Function],
-          "onWarn": [Function],
-          "textComponent": "span",
-          "timeZone": "Etc/UTC",
-          "wrapRichTextChunksInFragment": undefined,
-        }
-      }
-      text="test"
+    <span
+      className="LoadingSpinner with-text"
+      data-testid="loadingSpinner"
+      id="loadingSpinner"
     >
       <span
-        className="LoadingSpinner with-text"
-        data-testid="loadingSpinner"
-        id="loadingSpinner"
-      >
-        <span
-          className="fa fa-spinner fa-fw fa-pulse spinner"
-          title="Loading Icon"
-        />
-        test
-      </span>
-    </LoadingSpinner>
-  </injectIntl(LoadingSpinner)>
+        className="fa fa-spinner fa-fw fa-pulse spinner"
+        title="Loading Icon"
+      />
+      test
+    </span>
+  </Memo(LoadingSpinner)>
 </Memo(LoadingWrapper)>
 `;
 
@@ -84,62 +41,19 @@ exports[`components/widgets/loading/LoadingWrapper showing spinner without text
 <Memo(LoadingWrapper)
   loading={true}
 >
-  <injectIntl(LoadingSpinner)
+  <Memo(LoadingSpinner)
     text={null}
   >
-    <LoadingSpinner
-      intl={
-        Object {
-          "$t": [Function],
-          "defaultFormats": Object {},
-          "defaultLocale": "en",
-          "defaultRichTextElements": undefined,
-          "fallbackOnEmptyString": true,
-          "formatDate": [Function],
-          "formatDateTimeRange": [Function],
-          "formatDateToParts": [Function],
-          "formatDisplayName": [Function],
-          "formatList": [Function],
-          "formatListToParts": [Function],
-          "formatMessage": [Function],
-          "formatNumber": [Function],
-          "formatNumberToParts": [Function],
-          "formatPlural": [Function],
-          "formatRelativeTime": [Function],
-          "formatTime": [Function],
-          "formatTimeToParts": [Function],
-          "formats": Object {},
-          "formatters": Object {
-            "getDateTimeFormat": [Function],
-            "getDisplayNames": [Function],
-            "getListFormat": [Function],
-            "getMessageFormat": [Function],
-            "getNumberFormat": [Function],
-            "getPluralRules": [Function],
-            "getRelativeTimeFormat": [Function],
-          },
-          "locale": "en",
-          "messages": Object {},
-          "onError": [Function],
-          "onWarn": [Function],
-          "textComponent": "span",
-          "timeZone": "Etc/UTC",
-          "wrapRichTextChunksInFragment": undefined,
-        }
-      }
-      text={null}
+    <span
+      className="LoadingSpinner"
+      data-testid="loadingSpinner"
+      id="loadingSpinner"
     >
       <span
-        className="LoadingSpinner"
-        data-testid="loadingSpinner"
-        id="loadingSpinner"
-      >
-        <span
-          className="fa fa-spinner fa-fw fa-pulse spinner"
-          title="Loading Icon"
-        />
-      </span>
-    </LoadingSpinner>
-  </injectIntl(LoadingSpinner)>
+        className="fa fa-spinner fa-fw fa-pulse spinner"
+        title="Loading Icon"
+      />
+    </span>
+  </Memo(LoadingSpinner)>
 </Memo(LoadingWrapper)>
 `;
diff --git a/webapp/channels/src/components/widgets/loading/loading_spinner.test.tsx b/webapp/channels/src/components/widgets/loading/loading_spinner.test.tsx
index 001fbebbf8..b8c4c6405b 100644
--- a/webapp/channels/src/components/widgets/loading/loading_spinner.test.tsx
+++ b/webapp/channels/src/components/widgets/loading/loading_spinner.test.tsx
@@ -1,19 +1,18 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import {shallow} from 'enzyme';
 import React from 'react';
 
-import {shallowWithIntl} from 'tests/helpers/intl-test-helper';
-
 import LoadingSpinner from './loading_spinner';
 
 describe('components/widgets/loadingLoadingSpinner', () => {
     test('showing spinner with text', () => {
-        const wrapper = shallowWithIntl(<LoadingSpinner text='test'/>);
+        const wrapper = shallow(<LoadingSpinner text='test'/>);
         expect(wrapper).toMatchSnapshot();
     });
     test('showing spinner without text', () => {
-        const wrapper = shallowWithIntl(<LoadingSpinner/>);
+        const wrapper = shallow(<LoadingSpinner/>);
         expect(wrapper).toMatchSnapshot();
     });
 });
diff --git a/webapp/channels/src/components/widgets/loading/loading_spinner.tsx b/webapp/channels/src/components/widgets/loading/loading_spinner.tsx
index da626db7cc..6cb345a7ab 100644
--- a/webapp/channels/src/components/widgets/loading/loading_spinner.tsx
+++ b/webapp/channels/src/components/widgets/loading/loading_spinner.tsx
@@ -1,36 +1,30 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {PureComponent} from 'react';
-import type {ReactNode, CSSProperties} from 'react';
-import {injectIntl, type IntlShape} from 'react-intl';
+import classNames from 'classnames';
+import React from 'react';
+import {useIntl} from 'react-intl';
 
 type Props = {
-    text?: ReactNode;
-    style?: CSSProperties;
-    intl: IntlShape;
+    text?: React.ReactNode;
+    style?: React.CSSProperties;
 }
-class LoadingSpinner extends PureComponent<Props> {
-    public static defaultProps: Partial<Props> = {
-        text: null,
-    };
-
-    public render() {
-        return (
+const LoadingSpinner = ({text = null, style}: Props) => {
+    const {formatMessage} = useIntl();
+    return (
+        <span
+            id='loadingSpinner'
+            className={classNames('LoadingSpinner', {'with-text': Boolean(text)})}
+            style={style}
+            data-testid='loadingSpinner'
+        >
             <span
-                id='loadingSpinner'
-                className={'LoadingSpinner' + (this.props.text ? ' with-text' : '')}
-                style={this.props.style}
-                data-testid='loadingSpinner'
-            >
-                <span
-                    className='fa fa-spinner fa-fw fa-pulse spinner'
-                    title={this.props.intl.formatMessage({id: 'generic_icons.loading', defaultMessage: 'Loading Icon'})}
-                />
-                {this.props.text}
-            </span>
-        );
-    }
-}
+                className='fa fa-spinner fa-fw fa-pulse spinner'
+                title={formatMessage({id: 'generic_icons.loading', defaultMessage: 'Loading Icon'})}
+            />
+            {text}
+        </span>
+    );
+};
 
-export default injectIntl(LoadingSpinner);
+export default React.memo(LoadingSpinner);