build: change loading behaviour to fix tests

- reintroduce tests in cli

.github/workflows/playwright.yml

@@ -0,0 +1,31 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 18
+    - name: Install dependencies
+      run: yarn
+    - name: Install Playwright Browsers
+      run: yarn playwright install --with-deps
+    - uses: nick-fields/retry@v2
+      with:
+        name: Run Storybook tests
+        timeout_minutes: 5
+        max_attempts: 9
+        command: yarn test
+    - uses: actions/upload-artifact@v3
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

__snapshots__/repo-summary-card.test.js.snap

@@ -63,8 +63,10 @@ exports[`Repo/Summary/Card loading smoke-test 1`] = `
 <div class="card w-96 bg-neutral text-neutral-focus">
   <div class="card-body">
     <div class="text-center">
-      <span class="loading loading-spinner loading-lg text-base-100">
-      </span>
+      <div class="h-6 mt-1 mb-3 skeleton w-40">
+      </div>
+      <div class="h-4 mb-1 skeleton w-100">
+      </div>
     </div>
   </div>
 </div>

__snapshots__/repo-summary-list.test.js.snap

@@ -69,24 +69,30 @@ exports[`Repo/Summary/List Loading smoke-test 1`] = `
   <div class="card w-96 bg-neutral text-neutral-focus">
     <div class="card-body">
       <div class="text-center">
-        <span class="loading loading-spinner loading-lg text-base-100">
-        </span>
+        <div class="h-6 mt-1 mb-3 skeleton w-40">
+        </div>
+        <div class="h-4 mb-1 skeleton w-100">
+        </div>
       </div>
     </div>
   </div>
   <div class="card w-96 bg-neutral text-neutral-focus">
     <div class="card-body">
       <div class="text-center">
-        <span class="loading loading-spinner loading-lg text-base-100">
-        </span>
+        <div class="h-6 mt-1 mb-3 skeleton w-40">
+        </div>
+        <div class="h-4 mb-1 skeleton w-100">
+        </div>
       </div>
     </div>
   </div>
   <div class="card w-96 bg-neutral text-neutral-focus">
     <div class="card-body">
       <div class="text-center">
-        <span class="loading loading-spinner loading-lg text-base-100">
-        </span>
+        <div class="h-6 mt-1 mb-3 skeleton w-40">
+        </div>
+        <div class="h-4 mb-1 skeleton w-100">
+        </div>
       </div>
     </div>
   </div>
@@ -156,8 +162,10 @@ exports[`Repo/Summary/List Partially Loaded smoke-test 1`] = `
   <div class="card w-96 bg-neutral text-neutral-focus">
     <div class="card-body">
       <div class="text-center">
-        <span class="loading loading-spinner loading-lg text-base-100">
-        </span>
+        <div class="h-6 mt-1 mb-3 skeleton w-40">
+        </div>
+        <div class="h-4 mb-1 skeleton w-100">
+        </div>
       </div>
     </div>
   </div>

src/lib/components/RepoSummaryCard.svelte

@@ -34,7 +34,10 @@
   >
     <div class="card-body">
       <div class="text-center">
-        <span class="loading loading-spinner loading-lg text-base-100" />
+        <div class="h-6 mt-1 mb-3 skeleton w-40"></div>
+        <div class="h-4 mb-1 skeleton w-100"></div>
+
+        <!-- <span class="loading loading-spinner loading-lg text-base-100" /> -->
       </div>
     </div>
   </div>