Performance Optimizations and Viewport Feature

index.html

@@ -101,6 +101,10 @@ <h3 id="sidebar-header">
                     </form>
                 </div>
             </div>
+            <div class="col-auto d-flex align-items-center">
+                <div id="task-info-field">
+                </div>
+            </div>
         </div>
     </div>
     <div id="contents"></div>

scss/sdfv.scss

@@ -25,6 +25,20 @@ body.sdfv {
   font-family: "Segoe UI", Arial, sans-serif;
 }
 
+// Loading animation
+.loader {
+  border: 4px solid #ffffff;
+  border-top: 7px solid #34db50;
+  border-radius: 50%;
+  width: 25px;
+  height: 25px;
+  animation: spin 1s linear infinite;
+}
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
 .sdfv {
 
   .hidden {

src/renderer/canvas_manager.ts

@@ -790,8 +790,9 @@ export class CanvasManager {
         this.renderer.draw(dt);
         this.contention -= 1;
 
-        if (this.animation_end !== null && now < this.animation_end)
+        if (this.animation_end !== null && now < this.animation_end) {
             this.draw_async();
+        }
     }
 
     public draw_async(): void {