add custom loading save icon

2022-01-06 11:48:25 +00:00
parent d682accdbf
commit 798bf8ca44
2 changed files with 28 additions and 8 deletions
@@ -0,0 +1,22 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCircleNotch, faSave, faSpinner } from "@fortawesome/free-solid-svg-icons";
+import Tooltip from "@material-ui/core/Tooltip";
+
+const SaveIcon = ({ loading }) => (
+    <Tooltip
+        title={"Auto save enabled"}
+        arrow
+        placement="right"
+    >
+        <div style={{ position: 'relative', width: "2rem", height: "2rem", margin: "1rem" }}>
+            {loading && <FontAwesomeIcon style={{ position: "absolute" }} icon={faCircleNotch} spin={true} size="2x" color="grey" />}
+            <FontAwesomeIcon style={{
+                position: "absolute",
+                left: "50%",
+                top: "50%",
+                transform: "translate(-50%,-50%)",
+            }} icon={faSave} color={loading ? 'grey' : 'green'} size={loading ? "1x" : "lg"} />
+        </div>
+    </Tooltip>)
+
+export default SaveIcon