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