Merge pull request matrix-org#4842 from matrix-org/anoa/new_spinner

Add a new spinner design behind a labs flag

Author: anoadragon453

res/css/_common.scss

@@ -428,6 +428,10 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
     border-radius: 8px;
     padding: 0px;
     box-shadow: none;
+
+    /* Don't show scroll-bars on spinner dialogs */
+    overflow-x: hidden;
+    overflow-y: hidden;
 }
 
 // TODO: Review mx_GeneralButton usage to see if it can use a different class

res/css/views/elements/_InlineSpinner.scss

@@ -18,7 +18,7 @@ limitations under the License.
     display: inline;
 }
 
-.mx_InlineSpinner img {
+.mx_InlineSpinner_spin img {
     margin: 0px 6px;
     vertical-align: -3px;
 }

res/css/views/elements/_Spinner.scss

@@ -23,6 +23,16 @@ limitations under the License.
     flex: 1;
 }
 
+.mx_Spinner_spin img {
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
 .mx_MatrixChat_middlePanel .mx_Spinner {
     height: auto;
 }

res/img/spinner.svg

@@ -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/AppTile.js

@@ -16,6 +16,8 @@ limitations under the License.
 
 import React from "react";
 import createReactClass from 'create-react-class';
+import {_t} from "../../../languageHandler";
+import SettingsStore from "../../../settings/SettingsStore";
 
 export default createReactClass({
     displayName: 'InlineSpinner',
@@ -25,9 +27,25 @@ export default createReactClass({
         const h = this.props.h || 16;
         const imgClass = this.props.imgClassName || "";
 
+        let divClass;
+        let imageSource;
+        if (SettingsStore.isFeatureEnabled('feature_new_spinner')) {
+            divClass = "mx_InlineSpinner mx_Spinner_spin";
+            imageSource = require("../../../../res/img/spinner.svg");
+        } else {
+            divClass = "mx_InlineSpinner";
+            imageSource = require("../../../../res/img/spinner.gif");
+        }
+
         return (
-            <div className="mx_InlineSpinner">
-                <img src={require("../../../../res/img/spinner.gif")} width={w} height={h} className={imgClass} />
+            <div className={divClass}>
+                <img
+                    src={imageSource}
+                    width={w}
+                    height={h}
+                    className={imgClass}
+                    aria-label={_t("Loading...")}
+                />
             </div>
         );
     },

src/components/views/elements/InlineSpinner.js

@@ -16,19 +16,39 @@ limitations under the License.
 */
 
 import React from "react";
-import createReactClass from 'create-react-class';
+import PropTypes from "prop-types";
+import {_t} from "../../../languageHandler";
+import SettingsStore from "../../../settings/SettingsStore";
 
-export default createReactClass({
-    displayName: 'Spinner',
+const Spinner = ({w = 32, h = 32, imgClassName, message}) => {
+    let divClass;
+    let imageSource;
+    if (SettingsStore.isFeatureEnabled('feature_new_spinner')) {
+        divClass = "mx_Spinner mx_Spinner_spin";
+        imageSource = require("../../../../res/img/spinner.svg");
+    } else {
+        divClass = "mx_Spinner";
+        imageSource = require("../../../../res/img/spinner.gif");
+    }
 
-    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>
-        );
-    },
-});
+    return (
+        <div className={divClass}>
+            { message && <React.Fragment><div className="mx_Spinner_Msg">{ message}</div>&nbsp;</React.Fragment> }
+            <img
+                src={imageSource}
+                width={w}
+                height={h}
+                className={imgClassName}
+                aria-label={_t("Loading...")}
+            />
+        </div>
+    );
+};
+Spinner.propTypes = {
+    w: PropTypes.number,
+    h: PropTypes.number,
+    imgClassName: PropTypes.string,
+    message: PropTypes.node,
+};
+
+export default Spinner;

src/components/views/elements/MessageSpinner.js

@@ -22,6 +22,7 @@ import MFileBody from './MFileBody';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import { decryptFile } from '../../../utils/DecryptFile';
 import { _t } from '../../../languageHandler';
+import InlineSpinner from '../elements/InlineSpinner';
 
 export default class MAudioBody extends React.Component {
     constructor(props) {
@@ -94,7 +95,7 @@ export default class MAudioBody extends React.Component {
             // Not sure how tall the audio player is so not sure how tall it should actually be.
             return (
                 <span className="mx_MAudioBody">
-                    <img src={require("../../../../res/img/spinner.gif")} alt={content.body} width="16" height="16" />
+                    <InlineSpinner />
                 </span>
             );
         }

src/components/views/elements/Spinner.js

@@ -26,6 +26,7 @@ import { decryptFile } from '../../../utils/DecryptFile';
 import { _t } from '../../../languageHandler';
 import SettingsStore from "../../../settings/SettingsStore";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import InlineSpinner from '../elements/InlineSpinner';
 
 export default class MImageBody extends React.Component {
     static propTypes = {
@@ -365,12 +366,7 @@ export default class MImageBody extends React.Component {
 
         // e2e image hasn't been decrypted yet
         if (content.file !== undefined && this.state.decryptedUrl === null) {
-            placeholder = <img
-                src={require("../../../../res/img/spinner.gif")}
-                alt={content.body}
-                width="32"
-                height="32"
-            />;
+            placeholder = <InlineSpinner w={32} h={32} />;
         } else if (!this.state.imgLoaded) {
             // Deliberately, getSpinner is left unimplemented here, MStickerBody overides
             placeholder = this.getPlaceholder();