add placeholders

ChainSafe · Jun 11, 2024 · 9b8a23e · 9b8a23e
1 parent f7d9a46
commit 9b8a23e
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 13 deletions.
diff --git a/web/src/lib/components/Portfolio.svelte b/web/src/lib/components/Portfolio.svelte
@@ -28,17 +28,14 @@
 	}
 </script>
 
-{#await promise}
-	<p>...waiting</p>
-{:then data}
 	<div class="w-[1024px] bg-gray-200 dark:bg-gray-800 flex flex-col items-center gap-4 rounded-xl">
 		<!-- Balance Section -->
 		<div class="w-full p-6 rounded-xl flex justify-between items-center relative py-9">
 			<div>
 				<div class="text-slate-800 dark:text-slate-200 text-lg font-normal text-left">Balance</div>
 				<div class="text-slate-800 dark:text-slate-200 text-4xl font-semibold">
 					{#await total}
-						0
+						<div class="placeholder h-11 w-40" />
 					{:then result}
 						${result.toFixed(2)}
 					{:catch error}
@@ -62,6 +59,15 @@
 					</tr>
 					</thead>
 					<tbody>
+					{#await promise}
+						{#each {length: 3} as _}
+							<tr class="pt-2">
+								<td><div class="placeholder h-8" /></td>
+								<td><div class="placeholder h-8" /></td>
+								<td><div class="placeholder h-8" /></td>
+							</tr>
+						{/each}
+					{:then data}
 					{#each data.tokens as token, i}
 						<tr class="pt-2 bg-white dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer" on:click={() => handleListClick(i)}>
 							<td class="flex items-center gap-2 py-2">
@@ -80,11 +86,11 @@
 							</td>
 						</tr>
 					{/each}
+					{:catch error}
+						<p style="color: red">{error.message}</p>
+					{/await}
 					</tbody>
 				</table>
 			</div>
 		</div>
 	</div>
-{:catch error}
-	<p style="color: red">{error.message}</p>
-{/await}
diff --git a/web/src/lib/components/SubmitTokensDrawer.svelte b/web/src/lib/components/SubmitTokensDrawer.svelte
@@ -85,11 +85,14 @@
 	</div>
 </div>
 
-{#await quota}
-	<p>...waiting</p>
-{:then response}
+
 	<article class="container mx-auto p-4">
 		<ul class="space-y-4">
+			{#await quota}
+				<li class="bg-gray-200 dark:bg-gray-700 p-4 rounded-lg flex justify-between items-center mb-4">
+					<div class="placeholder h-[68px] w-full rounded-lg" />
+				</li>
+			{:then response}
 			{#each response.data as data, index}
 				{@const network = $drawerStore.meta.networks.get(data.sourceChain)}
 				{@const balance = $drawerStore.meta.balances
@@ -143,11 +146,11 @@
 					</div>
 				</li>
 			{/each}
+			{:catch error}
+				<p style="color: red">{error.message}</p>
+			{/await}
 		</ul>
 	</article>
-{:catch error}
-	<p style="color: red">{error.message}</p>
-{/await}
 
 <div class="w-full p-5 bg-white dark:bg-gray-800 border-t border-zinc-200 dark:border-gray-600 items-center gap-4 inline-flex mt-auto">
 	<button