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
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
fi

View file

@ -14,7 +14,11 @@
<section class="history">
<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>
</section>
@ -24,7 +28,8 @@
autofocus
id="source-input"
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>
</section>
</div>

View file

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

View file

@ -41,7 +41,11 @@ const repl = {
// Initialise
repl.elemSourceInput.addEventListener("change", onInputChange);
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;
});