demo: make form usable while Pyodide is loading

Previously the form could only be filled out after Pyodide finished
loading (since the <select> options were generated via Pyodide).

This commit changes this, so that the <select> options are already
in the static HTML. The "Loading Python..." form overlay is removed,
instead just the Highlight button is disabled, letting users fill
out the form while Pyodide is loading.

When a ?code query parameter is given a "Loading Python..." message
is displayed below the form, since in that case users probably want
to wait for the highlighted code (instead of filling out the form).

2 files changed, 22 insertions, 42 deletions

diff --git a/doc/_static/demo.css b/doc/_static/demo.css
index 90ceee2b..c3b64e1e 100644
--- a/doc/_static/demo.css
+++ b/doc/_static/demo.css
@@ -32,16 +32,9 @@
     padding: 0 15px;
 }
 
-#loading {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    margin: auto auto;
-    background-color: #cccccccc;
+#loading:not([hidden]) {
     display: flex;
-    flex-direction: column;
     justify-content: center;
-    text-align: center;
+    align-items: center;
+    gap: 1em;
 }
diff --git a/doc/_static/demo.js b/doc/_static/demo.js
index a4cbad4a..1dac0a90 100644
--- a/doc/_static/demo.js
+++ b/doc/_static/demo.js
@@ -1,42 +1,29 @@
+// otherwise the button is enabled when refreshing the page
+document.getElementById("hlbtn").disabled = true;
+
+const loadingDiv = document.getElementById("loading");
+
+let qvars = getQueryVariables();
+
+var sel = document.getElementById("lang");
+if (qvars['lexer']) {
+    sel.value = qvars['lexer'];
+}
+if (qvars['code'] !== undefined) {
+    document.getElementById("code").value = qvars['code'];
+    loadingDiv.hidden = false;
+}
+
 languagePluginLoader.then(() => {
     // pyodide is now ready to use...
     pyodide.loadPackage('Pygments').then(() => {
-        pyodide.runPython('import pygments.lexers, pygments.formatters.html, pygments.styles');
-
-        let qvars = getQueryVariables();
-
-        var lexerlist = pyodide.runPython('list(pygments.lexers.get_all_lexers())');
-        lexerlist.sort((a,b) => a[1][0] < b[1][0] ? -1 : 1);
-        var sel = document.getElementById("lang");
-        for (lex of lexerlist) {
-            if (lex[1][0] === undefined) {
-                continue;
-            }
-            var opt = document.createElement("option");
-            opt.text = lex[0];
-            opt.value = lex[1][0];
-            sel.add(opt);
-            if (lex[1].indexOf(qvars['lexer']) >= 0) {
-                opt.selected = true;
-            }
-        }
-
-        var stylelist = pyodide.runPython('list(pygments.styles.get_all_styles())');
-        var sel = document.getElementById("style");
-        for (sty of stylelist) {
-            if (sty != "default") {
-                var opt = document.createElement("option");
-                opt.text = sty;
-                opt.value = sty;
-                sel.add(opt);
-            }
-        }
+        pyodide.runPython('import pygments.lexers, pygments.formatters.html');
 
         document.getElementById("hlbtn").disabled = false;
-        document.getElementById("loading").style.display = "none";
+        document.getElementById("hlbtn").textContent = 'Highlight';
 
         if (qvars['code'] !== undefined) {
-            document.getElementById("code").value = qvars['code'];
+            loadingDiv.hidden = true;
             highlight();
         }
     });