From c56d7436c71f22aad7c2265e7d2da38fbc4f9b8a Mon Sep 17 00:00:00 2001
From: Hiren Chauhan <hiren.maheshwari366@gmail.com>
Date: Tue, 3 Oct 2023 00:07:23 +0530
Subject: [PATCH] feat: add skeleton loader for modal connecting state

Closes #34
---
 src/components/bc-start.ts | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/components/bc-start.ts b/src/components/bc-start.ts
index 792520b..36c3d86 100644
--- a/src/components/bc-start.ts
+++ b/src/components/bc-start.ts
@@ -4,7 +4,6 @@ import {withTwind} from './twind/withTwind';
 import store from '../state/store';
 import {html} from 'lit';
 import {exitIcon} from './icons/exitIcon';
-import {loadingIcon} from './icons/loadingIcon';
 import {hr} from './templates/hr';
 import './internal/bci-button';
 import {classes} from './css/classes';
@@ -17,8 +16,25 @@ export class Start extends withTwind()(BitcoinConnectElement) {
       class="flex flex-col justify-center items-center w-full font-sans"
     >
       ${this._connecting
-        ? html`<div class="py-28 ${classes['text-foreground']}">
-            ${loadingIcon}
+        ? html`<div
+            class="${classes['text-foreground']} w-full flex-1 animate-pulse"
+          >
+            <h1
+              class="w-1/2 h-7 mx-auto bg-gray-200 dark:bg-gray-700 rounded-md"
+            ></h1>
+            <div
+              class="w-1/2 h-4 mt-8 mb-2 mx-auto bg-gray-200 dark:bg-gray-700 rounded-md"
+            ></div>
+            <div
+              class="mb-12 h-10 w-1/2 mx-auto bg-gray-200 dark:bg-gray-700 rounded-md"
+            ></div>
+            ${hr()}
+            <div
+              class="my-4 h-4 w-1/2 mx-auto bg-gray-200 dark:bg-gray-700 rounded-md"
+            ></div>
+            <div
+              class="h-10 w-1/2 mx-auto bg-gray-200 dark:bg-gray-700 rounded-md"
+            ></div>
           </div>`
         : this._connected
         ? html` <h1 class="text-lg ${classes['text-neutral-secondary']}">
@@ -60,7 +76,7 @@ export class Start extends withTwind()(BitcoinConnectElement) {
               How would you like to connect?
             </h1>
 
-            <bc-connector-list />
+            <bc-connector-list></bc-connector-list>
           `}
     </div>`;
   }