Put behind a labs flag

res/css/views/elements/_Spinner.scss

@@ -23,7 +23,7 @@ limitations under the License.
     flex: 1;
 }
 
-.mx_Spinner img {
+.mx_Spinner_spin img {
     animation: spin 1s linear infinite;
 }
 

src/components/views/elements/InlineSpinner.js

@@ -17,6 +17,7 @@ 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',
@@ -27,10 +28,20 @@ export default createReactClass({
         const imgClass = this.props.imgClassName || "";
         const alt = this.props.alt || _t("Loading...");
 
+        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">
+            <div className={divClass}>
                 <img
-                    src={require("../../../../res/img/spinner.svg")}
+                    src={imageSource}
                     width={w}
                     height={h}
                     className={imgClass}

src/components/views/elements/Spinner.js

@@ -18,18 +18,29 @@ limitations under the License.
 import React from "react";
 import PropTypes from "prop-types";
 import {_t} from "../../../languageHandler";
+import SettingsStore from "../../../settings/SettingsStore";
 
 const Spinner = ({w = 32, h = 32, imgClassName, alt, 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");
+    }
+
     return (
-        <div className="mx_Spinner">
+        <div className={divClass}>
             { 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...")}
-            />
+                <img
+                    src={imageSource}
+                    width={w}
+                    height={h}
+                    className={imgClassName}
+                    alt={alt || _t("Loading...")}
+                />
         </div>
     );
 };

src/i18n/strings/en_EN.json

@@ -427,6 +427,7 @@
     "Sorry, your homeserver is too old to participate in this room.": "Sorry, your homeserver is too old to participate in this room.",
     "Please contact your homeserver administrator.": "Please contact your homeserver administrator.",
     "Failed to join room": "Failed to join room",
+    "New spinner design": "New spinner design",
     "Font scaling": "Font scaling",
     "Message Pinning": "Message Pinning",
     "Custom user status messages": "Custom user status messages",

src/settings/Settings.js

@@ -97,6 +97,12 @@ export const SETTINGS = {
     //     // not use this for new settings.
     //     invertedSettingName: "my-negative-setting",
     // },
+    "feature_new_spinner": {
+        isFeature: true,
+        displayName: _td("New spinner design"),
+        supportedLevels: LEVELS_FEATURE,
+        default: false,
+    },
     "feature_font_scaling": {
         isFeature: true,
         displayName: _td("Font scaling"),