From a75cf5716d703ae3da849e705bfa1bf654a3d43e Mon Sep 17 00:00:00 2001
From: o-az <omaraziz.dev@proton.me>
Date: Mon, 18 Nov 2024 10:04:26 -0800
Subject: [PATCH] chore: add loading

---
 .../svelte/tables/ChannelsTable.svelte        | 53 ++++++++++---------
 1 file changed, 27 insertions(+), 26 deletions(-)

diff --git a/docs/src/components/svelte/tables/ChannelsTable.svelte b/docs/src/components/svelte/tables/ChannelsTable.svelte
index d08058c7c3..88b4da86d2 100644
--- a/docs/src/components/svelte/tables/ChannelsTable.svelte
+++ b/docs/src/components/svelte/tables/ChannelsTable.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
-let promise = $state(fetchChannels())
+  let promise = $state(fetchChannels())
 
-async function fetchChannels() {
-  const response = await fetch("https://development.graphql.union.build/v1/graphql", {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({
-      query: /* GraphQL */ `
+  async function fetchChannels() {
+    const response = await fetch('https://development.graphql.union.build/v1/graphql', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        query: /* GraphQL */ `
           query v1UcsPathsQuery {
             data: v1_ucs1_paths {
               channel_id
@@ -22,34 +22,35 @@ async function fetchChannels() {
               }
             }
           }
-        `
+        `,
+      }),
     })
-  })
-  console.info(new Date().toISOString())
-  const json = await response.json()
-  // @ts-expect-error
-  const dataArray = json.data.data
-  return {
-    data: {
-      headers: ["channel", "source label", "source chain", "dest. label", "dest. chain"],
-      // @ts-expect-error
-      rows: dataArray.map(item => [
-        item.channel_id.split("-").at(-1),
-        item.source_chain.display_name,
-        `${item.source_chain.rpc_type}/${item.source_chain.chain_id}`,
-        item.destination_chain.display_name,
-        `${item.destination_chain.rpc_type}/${item.destination_chain.chain_id}`
-      ])
+    const json = await response.json()
+    // @ts-expect-error
+    const dataArray = json.data.data
+    return {
+      data: {
+        headers: ['channel', 'source label', 'source chain', 'dest. label', 'dest. chain'],
+        // @ts-expect-error
+        rows: dataArray.map(item => [
+          item.channel_id.split('-').at(-1),
+          item.source_chain.display_name,
+          `${item.source_chain.rpc_type}/${item.source_chain.chain_id}`,
+          item.destination_chain.display_name,
+          `${item.destination_chain.rpc_type}/${item.destination_chain.chain_id}`,
+        ]),
+      },
     }
   }
-}
 </script>
 
 <div class="px-4 sm:px-6 lg:px-8 flex justify-center w-full">
   <div class="mt-8 flow-root">
     <div class="overflow-x-auto">
       <div class="inline-block min-w-full align-middle border rounded-sm border-neutral-400">
-        {#await promise then data}
+        {#await promise}
+          <p>Loading...</p>
+        {:then data}
           {@const { headers, rows } = data.data}
           <table class="divide-y divide-gray-300 tabular-nums">
             <thead class="w-full min-w-full">