imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Vectorize spinners

Browse source 
This replaces most of the GIF spinners used throughout the app with an
SVG that respects the user's theme. However, spinner.gif is still
retained for the room timeline avatar uploader component, since it is
more difficult to replace.

Signed-off-by: Robin Townsend <robin@robin.town>
This commit is contained in:
Robin Townsend 2021-02-23 19:41:23 -05:00
parent 667c94b387
commit 40b684d7de
6 changed files with 304 additions and 161 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/components/views/elements/Spinner.js
View file

@ -21,23 +21,31 @@ import {_t} from "../../../languageHandler";
import SettingsStore from "../../../settings/SettingsStore";
const Spinner = ({w = 32, h = 32, imgClassName, message}) => {
let imageSource;
let icon;
if (SettingsStore.getValue('feature_new_spinner')) {
imageSource = require("../../../../res/img/spinner.svg");
} else {
imageSource = require("../../../../res/img/spinner.gif");
}
return (
<div className="mx_Spinner">
{ message && <React.Fragment><div className="mx_Spinner_Msg">{ message}</div>&nbsp;</React.Fragment> }
icon = (
<img
src={imageSource}
src={require("../../../../res/img/logo-spinner.svg")}
width={w}
height={h}
className={imgClassName}
aria-label={_t("Loading...")}
/>
);
} else {
icon = (
<div
className="mx_Spinner_icon"
style={{width: w, height: h}}
aria-label={_t("Loading...")}
></div>
);
}
return (
<div className="mx_Spinner">
{ message && <React.Fragment><div className="mx_Spinner_Msg">{ message }</div>&nbsp;</React.Fragment> }
{ icon }
</div>
);
};