From 2b72cea4dc4fb0fa2747dcd4772eb9048738cb38 Mon Sep 17 00:00:00 2001
From: Mark MacKay <mark@duopixel.com>
Date: Wed, 16 Jun 2021 15:57:20 -0500
Subject: [PATCH] adding loading state to fonts

---
 src/css/draginput.css | 37 +++++++++++++++++++++++++++++++++++++
 src/css/text.css      |  1 +
 src/js/Text.js        | 15 ++++++++++-----
 3 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/src/css/draginput.css b/src/css/draginput.css
index 5723f0f..ba9d18e 100644
--- a/src/css/draginput.css
+++ b/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);
 }
diff --git a/src/css/text.css b/src/css/text.css
index 8812164..a799bcd 100644
--- a/src/css/text.css
+++ b/src/css/text.css
@@ -51,6 +51,7 @@
   font-size: 2em;
   line-height: 80px;
   padding: 0 var(--x2);
+  white-space: nowrap;
 }
 
 #preview_font + .caret {
diff --git a/src/js/Text.js b/src/js/Text.js
index 93f23c1..5aeb7bf 100644
--- a/src/js/Text.js
+++ b/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");
+    };
     
   });