Change the look of the spinner

src/components/views/elements/AppTile.js

@@ -29,7 +29,7 @@ import { _t } from '../../../languageHandler';
 import * as sdk from '../../../index';
 import AppPermission from './AppPermission';
 import AppWarning from './AppWarning';
-import MessageSpinner from './MessageSpinner';
+import Spinner from './Spinner';
 import WidgetUtils from '../../../utils/WidgetUtils';
 import dis from '../../../dispatcher/dispatcher';
 import ActiveWidgetStore from '../../../stores/ActiveWidgetStore';
@@ -740,7 +740,7 @@ export default class AppTile extends React.Component {
         if (this.props.show) {
             const loadingElement = (
                 <div className="mx_AppLoading_spinner_fadeIn">
-                    <MessageSpinner msg='Loading...' />
+                    <Spinner message={_t("Loading...")} />
                 </div>
             );
             if (!this.state.hasPermissionToLoad) {

src/components/views/elements/InlineSpinner.js

@@ -16,6 +16,7 @@ limitations under the License.
 
 import React from "react";
 import createReactClass from 'create-react-class';
+import {_t} from "../../../languageHandler";
 
 export default createReactClass({
     displayName: 'InlineSpinner',
@@ -24,10 +25,17 @@ export default createReactClass({
         const w = this.props.w || 16;
         const h = this.props.h || 16;
         const imgClass = this.props.imgClassName || "";
+        const alt = this.props.alt || _t("Loading...");
 
         return (
             <div className="mx_InlineSpinner">
-                <img src={require("../../../../res/img/spinner.gif")} width={w} height={h} className={imgClass} />
+                <img
+                    src={require("../../../../res/img/spinner.svg")}
+                    width={w}
+                    height={h}
+                    className={imgClass}
+                    alt={alt}
+                />
             </div>
         );
     },

src/components/views/elements/MessageSpinner.js

@@ -1,35 +0,0 @@
-/*
-Copyright 2017 Vector Creations Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import createReactClass from 'create-react-class';
-
-export default createReactClass({
-    displayName: 'MessageSpinner',
-
-    render: function() {
-        const w = this.props.w || 32;
-        const h = this.props.h || 32;
-        const imgClass = this.props.imgClassName || "";
-        const msg = this.props.msg || "Loading...";
-        return (
-            <div className="mx_Spinner">
-                <div className="mx_Spinner_Msg">{ msg }</div>&nbsp;
-                <img src={require("../../../../res/img/spinner.gif")} width={w} height={h} className={imgClass} />
-            </div>
-        );
-    },
-});

src/components/views/elements/Spinner.js

@@ -16,19 +16,29 @@ limitations under the License.
 */
 
 import React from "react";
-import createReactClass from 'create-react-class';
+import PropTypes from "prop-types";
+import {_t} from "../../../languageHandler";
 
-export default createReactClass({
-    displayName: 'Spinner',
+const Spinner = ({w = 32, h = 32, imgClassName, alt, message}) => {
+    return (
+        <div className="mx_Spinner">
+            { message && <React.Fragment><div className="mx_Spinner_Msg">{ message}</div>&nbsp;</React.Fragment> }
+            <img
+                src={require("../../../../res/img/spinner.svg")}
+                width={w}
+                height={h}
+                className={imgClassName}
+                alt={alt || _t("Loading...")}
+            />
+        </div>
+    );
+};
+Spinner.propTypes = {
+    w: PropTypes.number,
+    h: PropTypes.number,
+    imgClassName: PropTypes.string,
+    alt: PropTypes.string,
+    message: PropTypes.node,
+};
 
-    render: function() {
-        const w = this.props.w || 32;
-        const h = this.props.h || 32;
-        const imgClass = this.props.imgClassName || "";
-        return (
-            <div className="mx_Spinner">
-                <img src={require("../../../../res/img/spinner.gif")} width={w} height={h} className={imgClass} />
-            </div>
-        );
-    },
-});
+export default Spinner;