Fixing Loading animation

src/components/Footer.tsx

@@ -40,7 +40,7 @@ export class Footer extends Component<{}, { synced: boolean, syncing: boolean }>
     }
 
     render() {
-        let extrac = "";
+        let extrac = undefined;
         let color;
         let text;
         if (this.state.syncing) {
@@ -69,5 +69,4 @@ export class Footer extends Component<{}, { synced: boolean, syncing: boolean }>
             </span>
         </footer>
     }
-
 }

src/components/footer.scss

@@ -1,10 +1,18 @@
 @import "../vars.scss";
 
-.reloading { animation: turner 1s infinite linear }
+.reloading {
+    display: inline-block;
+    animation: turner 1s linear infinite;
+}
 
-@keyframes turner{
-    from{  transform: rotate(0deg)   }
-    to  {  transform: rotate(360deg) }
+@keyframes turner {
+    from {
+        transform: rotate(0deg)
+    }
+
+    to {
+        transform: rotate(360deg)
+    }
 }
 
 footer {
@@ -13,11 +21,11 @@ footer {
     bottom: 0;
     left: 0;
     right: 0;
- 
+
     display: flex;
     justify-content: space-between;
 
     // border-top: 1px solid $border-color;
-    
-    padding: 0.15em !important;
+
+    padding: 0.15em 1em !important;
 }

src/components/notifications.scss

@@ -45,6 +45,7 @@
         font-weight: bold;
         margin: 0;
     }
+
     span {
         margin-left: 3px;
         word-break: break-word;
@@ -56,5 +57,5 @@
     margin-right:var(--notification-margin);
     padding: 0.5em;
     width: 300px;
-}
-
+    // transition: all .3s;
+}