loading

src/lib/components/Request.svelte

@@ -24,6 +24,7 @@
     import capitalize from "$lib/utils/capitalize";
     import { updateParams } from "$lib/utils/params";
     import { handleRun } from "$lib/utils/handle-run";
+    import { isLoading } from "$lib/stores/response-store";
 
     let selectedMethod;
     let rpcError = false;
@@ -35,12 +36,14 @@
     }
 
     async function runMethod() {
+        isLoading.set(true);
         const { rpcError: error, result } = await handleRun(
             selectedMethod,
             params,
             $currentRPC
         );
         rpcError = error;
+        isLoading.set(false);
     }
 </script>
 

src/lib/components/Response.svelte

@@ -17,6 +17,7 @@
         isResponse,
         responseTime,
         copyResponse,
+        isLoading,
     } from "$lib/stores/response-store.js";
     import { currentMethod } from "$lib/stores/current-method.js";
     import formatHighlight from "json-format-highlight";
@@ -58,7 +59,14 @@
     );
 </script>
 
-{#if selectedMethod && responseStatus == "true"}
+{#if $isLoading == true}
+    <img
+        class="m-auto w-20 justify-center"
+        src="spinner.svg"
+        alt=""
+    />
+{/if}
+{#if selectedMethod && responseStatus == "true" && $isLoading == false}
     <div class="max-h-100 p-2 text-white opacity-80">
         <div
             class="max-h-100 rounded-xl border border-zinc-900 border-opacity-50 p-4 shadow-lg"

src/lib/stores/response-store.js

@@ -4,3 +4,4 @@ export const responseStore = writable("");
 export const isResponse = writable("false");
 export const responseTime = writable("");
 export const copyResponse = writable("");
+export const isLoading = writable(false);