www: Disable Web REPL input until the compiler .wasm has loaded

This commit is contained in:
Brian Carroll 2022-09-12 23:00:22 +01:00
parent f85f1b84a2
commit 2b3e386345
No known key found for this signature in database
GPG key ID: 9CF4E3BF9C4722C7
4 changed files with 16 additions and 4 deletions

View file

@ -12,7 +12,7 @@ set -euxo pipefail
if ! which wasm-pack if ! which wasm-pack
then then
echo "To build the Web REPL, you need to run `cargo install wasm-pack`" echo "To build the Web REPL, you need to run 'cargo install wasm-pack'"
exit 1 exit 1
fi fi

View file

@ -14,7 +14,11 @@
<section class="history"> <section class="history">
<div class="scroll-wrap"> <div class="scroll-wrap">
<div id="history-text" class="scroll code"></div> <div id="history-text" class="scroll code">
<div id="loading-message">
Loading Roc compiler as a WebAssembly module... please wait!
</div>
</div>
</div> </div>
</section> </section>
@ -24,7 +28,8 @@
autofocus autofocus
id="source-input" id="source-input"
class="code" class="code"
placeholder="Type some Roc code and press Enter. (Use Shift+Enter for multi-line input)" placeholder="You can enter Roc code here after the compiler is loaded!"
disabled
></textarea> ></textarea>
</section> </section>
</div> </div>

View file

@ -43,6 +43,9 @@ section.history {
margin: 16px 0; margin: 16px 0;
padding: 8px; padding: 8px;
} }
#loading-message {
margin: 40% 10%;
}
.history-item { .history-item {
margin-bottom: 24px; margin-bottom: 24px;
} }

View file

@ -41,7 +41,11 @@ const repl = {
// Initialise // Initialise
repl.elemSourceInput.addEventListener("change", onInputChange); repl.elemSourceInput.addEventListener("change", onInputChange);
repl.elemSourceInput.addEventListener("keyup", onInputKeyup); repl.elemSourceInput.addEventListener("keyup", onInputKeyup);
roc_repl_wasm.default('/repl/roc_repl_wasm_bg.wasm').then((instance) => { roc_repl_wasm.default("/repl/roc_repl_wasm_bg.wasm").then((instance) => {
repl.elemHistory.querySelector('#loading-message').remove();
repl.elemSourceInput.disabled = false;
repl.elemSourceInput.placeholder =
"Type some Roc code and press Enter. (Use Shift+Enter for multi-line input)";
repl.compiler = instance; repl.compiler = instance;
}); });