Show loading indicator when JSON Editor is loading

Author: krisahil

css/patternkit.css

@@ -0,0 +1,22 @@
+/*
+ * Miscellaneous styles for Patternkit interfaces.
+ */
+
+/*
+ * Implements spinning loader to display while
+ * JSON Editor's schemas are being loaded.
+ */
+.js-patternkit-loading__on {
+  border: 4px solid #ebebeb; /* Light grey */
+  border-top: 4px solid #0066cc; /* Blue */
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  margin: 40px auto;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}

js/patternkit.jsoneditor.es6.js

@@ -53,6 +53,9 @@ patternkitEditorArray(jQuery, Drupal, JSONEditor);
      };
      let $target = $('#patternkit-editor-target', context);
      $target.once('patternkit-editor').each(function () {
+       var loadingIndicatorClass = 'js-patternkit-loading__on';
+
+       $target.before(`<div class="${loadingIndicatorClass}"></div>`);
 
        let theme_js = settings.patternkitEditor.themeJS;
        if (typeof theme_js === 'string') {
@@ -186,6 +189,8 @@ patternkitEditorArray(jQuery, Drupal, JSONEditor);
          if (window.M) {
            window.M.updateTextFields();
          }
+
+         $('.' + loadingIndicatorClass).removeClass(loadingIndicatorClass);
        });
        window.patternkitEditor.on('change', saveSchema);
        // Drupal triggers Ajax submit via input events.

js/patternkit.jsoneditor.js

@@ -1063,6 +1063,8 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 
       var $target = $('#patternkit-editor-target', context);
       $target.once('patternkit-editor').each(function () {
+        var loadingIndicatorClass = 'js-patternkit-loading__on';
+        $target.before("<div class=\"".concat(loadingIndicatorClass, "\"></div>"));
         var theme_js = settings.patternkitEditor.themeJS;
 
         if (typeof theme_js === 'string') {
@@ -1216,6 +1218,8 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
           if (window.M) {
             window.M.updateTextFields();
           }
+
+          $('.' + loadingIndicatorClass).removeClass(loadingIndicatorClass);
         });
         window.patternkitEditor.on('change', saveSchema); // Drupal triggers Ajax submit via input events.
         // This is before allowing other events, so we need to add a pre-hook

patternkit.libraries.yml

@@ -16,6 +16,9 @@ jsoneditor.dev:
 
 patternkit.jsoneditor:
   version: VERSION
+  css:
+    theme:
+      css/patternkit.css: {}
   js:
     js/patternkit.jsoneditor.js: {}
   dependencies: