Implement the spinner functionality

web/js/autoload.js

@@ -1,6 +1,7 @@
 // Import the used modules
 import * as api from "./api.js";
 import * as buttons from "./buttons.js";
+import * as spinner from "./spinner.js";
 
 // Set up the buttons
 buttons.setupButtons();
@@ -57,4 +58,4 @@ async function loadPaste() {
         input.focus();
     }
 }
-loadPaste();
+spinner.surround(loadPaste);

web/js/buttons.js

@@ -1,6 +1,7 @@
 // Import the used modules
 import * as api from "./api.js";
 import * as autoload from "./autoload.js";
+import * as spinner from "./spinner.js";
 
 // setupKeybinds initializes the keybinds for the buttons
 export function setupKeybinds() {
@@ -46,7 +47,8 @@ export function setupButtons() {
     });
 
     // Define the behavior of the 'save' button
-    document.getElementById("btn_save").addEventListener("click", async function() {
+    document.getElementById("btn_save").addEventListener("click", function() {
+        spinner.surround(async function() {
             // Return if the text area is empty
             const input = document.getElementById("input");
             if (!input.value) return;
@@ -66,9 +68,11 @@ export function setupButtons() {
 
             // TODO: Find a solution to display the deletion token
         });
+    });
 
     // Define the behavior of the 'delete' button
-    document.getElementById("btn_delete").addEventListener("click", async function() {
+    document.getElementById("btn_delete").addEventListener("click", function() {
+        spinner.surround(async function() {
             // Ask the user for the deletion token
             const deletionToken = window.prompt("Deletion Token:");
             if (!deletionToken) return;
@@ -84,15 +88,18 @@ export function setupButtons() {
             // Redirect the user to the main page
             location.replace(location.protocol + "//" + location.host);
         });
+    });
 
     // Define the behavior of the 'copy' button
-    document.getElementById("btn_copy").addEventListener("click", async function() {
+    document.getElementById("btn_copy").addEventListener("click", function() {
+        spinner.surround(async function() {
             // Ask for the clipboard permissions
             askClipboardPermissions();
             
             // Copy the code
             await navigator.clipboard.writeText(document.getElementById("code").innerText);
         });
+    });
 }
 
 // askClipboardPermissions asks the user for the clipboard permissions

web/js/spinner.js

@@ -0,0 +1,19 @@
+// element holds the spinners DOM element
+const element = document.getElementById("spinner");
+
+// show shows the spinner
+export function show() {
+    element.classList.remove("hidden");
+}
+
+// hide hides the spinner
+export function hide() {
+    element.classList.add("hidden");
+}
+
+// surround surrounds an action with a spinner
+export async function surround(action) {
+    show();
+    await action();
+    hide();
+}