doc: add loader icon for editor

vemonet · Mar 7, 2024 · a13b4fb · a13b4fb
1 parent dfa0d44
commit a13b4fb
Showing 1 changed file with 8 additions and 1 deletion.
diff --git a/lib/docs/docs/playground.html b/lib/docs/docs/playground.html
@@ -34,7 +34,13 @@ <h1 class="text-xl font-semibold">✍️ Nanopublication signing playground 🕹
       <button id="switch-trig-jsonld" class="p-2 text-sm rounded-md bg-slate-600 hover:bg-slate-800 text-slate-400">Switch to JSON-LD</button>
 
       <!-- Input editor -->
-      <div id="rdf-input" style="min-height: 34em;"></div>
+      <div id="rdf-input" style="min-height: 34em;">
+        <div id="editor-loading-spinner" class="flex flex-col justify-center items-center" style="height: 34em;">
+            <i class="fas fa-spinner fa-spin fa-3x"></i>
+            <span class="text-sm mt-3">Loading editor...</span>
+        </div>
+      </div>
+
 
       <!-- Private key input -->
       <p class="text-sm text-center">
@@ -152,6 +158,7 @@ <h1 class="text-xl font-semibold">✍️ Nanopublication signing playground 🕹
             language: 'sparql',
             value: exampleTrig,
         });
+        document.getElementById('editor-loading-spinner').style.display = 'none';
         const oeditor = monaco.editor.create(rdfOutput, {
             ...editorsConfig,
             language: 'sparql',