adding loading state to fonts

src/css/draginput.css

@@ -300,6 +300,43 @@ body.dragging .draginput .angle {
   background-color: var(--z2);
 }
 
+.draginput.loading:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color:  var(--z2);
+  opacity:  0.8;
+  z-index: 10;
+}
+
+.draginput.loading:after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: var(--x4);
+  height: var(--x4);
+  border-radius: var(--x4);
+  z-index: 10;
+  border: solid var(--d7) 2px;
+  border-top-color: transparent;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0%   { transform: translate(-50%, -50%) rotate(0);      }
+  100% { transform: translate(-50%, -50%) rotate(360deg); }
+}
+
+
+
+
+/* inverted */
+
 .inverted .draginput {
   background-color: var(--z1);
 }

src/css/text.css

@@ -51,6 +51,7 @@
   font-size: 2em;
   line-height: 80px;
   padding: 0 var(--x2);
+  white-space: nowrap;
 }
 
 #preview_font + .caret {

src/js/Text.js

@@ -64,14 +64,19 @@ MD.Text = function(){
     var fam_display = this.options[this.selectedIndex].text;
     $('#preview_font').html(fam_display).css("font-family", fam);
     $('#font_family').val(fam).change();
-    // todo should depend on actual load
-    document.fonts.onloadingdone = function (fontFaceSetEvent) {
-    const els = svgCanvas.getSelectedElems();
+ 
+    document.fonts.onloading = function(fontFaceSetEvent) {
+      $("#tool_font_family").addClass("loading");
+    };
+ 
+    document.fonts.onloadingdone = function(fontFaceSetEvent) {
+      const els = svgCanvas.getSelectedElems();
       els.forEach(el => {
         var selector = svgCanvas.selectorManager.requestSelector(el);
         selector.resize();
-      })
-     };
+      });
+      $("#tool_font_family").removeClass("loading");
+    };
     
   });