[GH-1078]: fixed the alignment issue of loading ellipses (#1089)

* [GH-1078]: fixed the alignment issue of loading ellipses

* [GH-1078]: added files related to loader into new folder

* [GH-1078]: deleting duplicate files

* [GH-1078]: renamed the loading file to loading/index.tsx

* [GH-1078]: fixed the alignment of ellipses after Loading to the middle

* [GH-1078]: updated the snap file

* [GH-1078]: removed loading.scss file and added inline styling

webapp/src/components/loading.tsx

@@ -1,34 +1,22 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {PureComponent} from 'react';
+import React from 'react';
 
-type Props = {
-    position?: 'absolute' | 'fixed' | 'relative' | 'static' | 'inherit';
-    style?: object;
+const Loading = () => {
+    return (
+        <div
+            className='loading-screen'
+            style={{position: 'relative'}}
+        >
+            <div className='loading__content'>
+                <h3 style={{margin: '20px 0'}}>{'Loading'}</h3>
+                <div className='round round-1'/>
+                <div className='round round-2'/>
+                <div className='round round-3'/>
+            </div>
+        </div>
+    );
 };
 
-export default class Loading extends PureComponent<Props> {
-    static defaultProps = {
-        position: 'relative',
-        style: {},
-    };
-
-    public render() {
-        return (
-            <div
-                className='loading-screen'
-                style={{position: this.props.position, ...this.props.style}}
-            >
-                <div className='loading__content'>
-                    <h3>
-                        {'Loading'}
-                    </h3>
-                    <div className='round round-1'/>
-                    <div className='round round-2'/>
-                    <div className='round round-3'/>
-                </div>
-            </div>
-        );
-    }
-}
+export default Loading;

webapp/src/components/modals/channel_subscriptions/__snapshots__/edit_channel_subscription.test.tsx.snap

@@ -80,10 +80,7 @@ exports[`components/EditChannelSubscription should match snapshot 1`] = `
           }
         }
       />
-      <Loading
-        position="relative"
-        style={Object {}}
-      />
+      <Loading />
     </div>
     <ConfirmModal
       cancelButtonText="Cancel"
@@ -3884,10 +3881,7 @@ exports[`components/EditChannelSubscription should match snapshot with no issue
           }
         }
       />
-      <Loading
-        position="relative"
-        style={Object {}}
-      />
+      <Loading />
     </div>
     <ConfirmModal
       cancelButtonText="Cancel"
@@ -4142,10 +4136,7 @@ exports[`components/EditChannelSubscription should produce subscription error wh
           }
         }
       />
-      <Loading
-        position="relative"
-        style={Object {}}
-      />
+      <Loading />
     </div>
     <ConfirmModal
       cancelButtonText="Cancel"