From a13b4fb2ec7599660dae8b07238c26be3bca6ea9 Mon Sep 17 00:00:00 2001
From: Vincent Emonet <vincent.emonet@gmail.com>
Date: Thu, 7 Mar 2024 15:48:21 +0100
Subject: [PATCH] doc: add loader icon for editor

---
 lib/docs/docs/playground.html | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/lib/docs/docs/playground.html b/lib/docs/docs/playground.html
index 0415f03..fb025a3 100644
--- 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',