add custom loading save icon

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}>
+          <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

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