OceanSlim/grain
1
0
Fork 0
mirror of https://github.com/0ceanSlim/grain.git synced 2024-10-30 01:26:32 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

replace import button with spinner to prevent multiple imports with rapid clicking

Browse Source
This commit is contained in:
0ceanSlim 2024-08-08 08:25:08 -04:00
parent 1cfe7c8e94
commit ea0a29d4b9
1 changed files with 37 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/views/importEvents.html
View File

@ -10,7 +10,6 @@
hx-target="#result"
hx-indicator="#spinner"
>
<div class="content-right">
<div>
<label for="pubkey">Pubkey:</label>
<input
@ -32,13 +31,18 @@
required
/>
</div>
</div>
<div class="flex items-center justify-center" style="height: 32px">
<!-- Adjust height as needed -->
<button
id="import-button"
class="p-2 m-2 font-bold bg-green-500 rounded-md font-xl"
type="submit"
>
Import Events
</button>
<div id="spinner" class="spinner"></div>
</div>
<div id="result" class="p-2 m-2 text-xl font-bold"></div>
<div class="font-bold text-md">
⚠️ This Feature is Experimental<br />
If you are whitelisted, this SHOULD capture all of your events<br />
@ -46,12 +50,7 @@
</div>
</form>
</div>
<div
id="spinner"
class="m-4 text-lg font-bold text-center spinner"
style="display: none"
></div>
<div id="result" class="p-2 m-2 text-xl font-bold"></div>
<button
hx-get="/"
hx-swap="outerHTML"
@ -60,19 +59,23 @@
>
Return to Dashboard
</button>
<script>
document
.getElementById("import-form")
.addEventListener("submit", function () {
document.getElementById("import-button").style.display = "none";
document.getElementById("spinner").style.display = "block";
});
document.addEventListener("htmx:afterRequest", function () {
document.getElementById("spinner").style.display = "none";
// No need to bring back the import button
});
document.addEventListener("htmx:requestError", function () {
document.getElementById("spinner").style.display = "none";
document.getElementById("import-button").style.display = "block"; // Bring back the button only on error
});
</script>
</main>