From 798bf8ca442bb4018e2810d80f92afdd837e2564 Mon Sep 17 00:00:00 2001
From: Felix Erdmann <hello@felixerdmann.com>
Date: Thu, 6 Jan 2022 11:48:25 +0000
Subject: [PATCH] add custom loading save icon

---
 src/components/CodeEditor/CodeEditor.js | 14 ++++++--------
 src/components/CodeEditor/SaveIcon.js   | 22 ++++++++++++++++++++++
 2 files changed, 28 insertions(+), 8 deletions(-)
 create mode 100644 src/components/CodeEditor/SaveIcon.js

diff --git a/src/components/CodeEditor/CodeEditor.js b/src/components/CodeEditor/CodeEditor.js
index 38a024d..e3dc590 100644
--- a/src/components/CodeEditor/CodeEditor.js
+++ b/src/components/CodeEditor/CodeEditor.js
@@ -9,7 +9,7 @@ import { saveAs } from "file-saver";
 import Drawer from "@material-ui/core/Drawer";
 import Sidebar from "./Sidebar";
 import Dialog from "../Dialog";
-import Snackbar from "../Snackbar";
+import SaveIcon from './SaveIcon'
 
 const CodeEditor = (props) => {
   const [fileHandle, setFileHandle] = useState();
@@ -168,7 +168,11 @@ void loop() {
           </p>
         </Drawer>
         <Grid item lg={8}>
-          <h1>Code Editor</h1>
+          <div style={{display: "flex", alignItems: "center"}}>
+            <h1>Code Editor</h1>
+            <SaveIcon loading={autoSave} />
+          </div>
+
           <MonacoEditor
             height="80vh"
             onChange={(value) => {
@@ -215,12 +219,6 @@ void loop() {
           >
             Reset Editor
           </Button>
-          <Snackbar
-            open={autoSave}
-            message={"Automatisch gespeichert"}
-            type={"success"}
-            key={Date.now()}
-          />
           <Sidebar />
 
           <Dialog
diff --git a/src/components/CodeEditor/SaveIcon.js b/src/components/CodeEditor/SaveIcon.js
new file mode 100644
index 0000000..5e65331
--- /dev/null
+++ b/src/components/CodeEditor/SaveIcon.js
@@ -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
\ No newline at end of file