loading_spinner.tsx converted to functional component. (#25115)

* loading_spinner.tsx converted to functional component.

* merging changes revised

* fixing CI failures

* fixing linting errors

* snapshot updation

* Update snapshot

* Update snapshot

* update snapshot

* Update snapshot

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

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"
   >

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>
 `;
 

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"

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",

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
+    <span
-      intl={
+      className="LoadingSpinner with-text"
-        Object {
+      data-testid="loadingSpinner"
-          "$t": [Function],
+      id="loadingSpinner"
-          "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"
+        className="fa fa-spinner fa-fw fa-pulse spinner"
-        data-testid="loadingSpinner"
+        title="Loading Icon"
-        id="loadingSpinner"
+      />
-      >
+      test
-        <span
+    </span>
-          className="fa fa-spinner fa-fw fa-pulse spinner"
+  </Memo(LoadingSpinner)>
-          title="Loading Icon"
-        />
-        test
-      </span>
-    </LoadingSpinner>
-  </injectIntl(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
+    <span
-      intl={
+      className="LoadingSpinner"
-        Object {
+      data-testid="loadingSpinner"
-          "$t": [Function],
+      id="loadingSpinner"
-          "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"
+        className="fa fa-spinner fa-fw fa-pulse spinner"
-        data-testid="loadingSpinner"
+        title="Loading Icon"
-        id="loadingSpinner"
+      />
-      >
+    </span>
-        <span
+  </Memo(LoadingSpinner)>
-          className="fa fa-spinner fa-fw fa-pulse spinner"
-          title="Loading Icon"
-        />
-      </span>
-    </LoadingSpinner>
-  </injectIntl(LoadingSpinner)>
 </Memo(LoadingWrapper)>
 `;

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();
     });
 });

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 classNames from 'classnames';
-import type {ReactNode, CSSProperties} from 'react';
+import React from 'react';
-import {injectIntl, type IntlShape} from 'react-intl';
+import {useIntl} from 'react-intl';
 
 type Props = {
-    text?: ReactNode;
+    text?: React.ReactNode;
-    style?: CSSProperties;
+    style?: React.CSSProperties;
-    intl: IntlShape;
 }
-class LoadingSpinner extends PureComponent<Props> {
+const LoadingSpinner = ({text = null, style}: Props) => {
-    public static defaultProps: Partial<Props> = {
+    const {formatMessage} = useIntl();
-        text: null,
+    return (
-    };
+        <span
-
+            id='loadingSpinner'
-    public render() {
+            className={classNames('LoadingSpinner', {'with-text': Boolean(text)})}
-        return (
+            style={style}
+            data-testid='loadingSpinner'
+        >
             <span
-                id='loadingSpinner'
+                className='fa fa-spinner fa-fw fa-pulse spinner'
-                className={'LoadingSpinner' + (this.props.text ? ' with-text' : '')}
+                title={formatMessage({id: 'generic_icons.loading', defaultMessage: 'Loading Icon'})}
-                style={this.props.style}
+            />
-                data-testid='loadingSpinner'
+            {text}
-            >
+        </span>
-                <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>
-        );
-    }
-}
 
-export default injectIntl(LoadingSpinner);
+export default React.memo(LoadingSpinner);