feat: add lighthouse test to CI

.github/workflows/lighthouse-vercel-preview.yml

@@ -0,0 +1,89 @@
+name: Lighthouse (Vercel Preview URL)
+
+on:
+  pull_request:
+    branches: [main]
+
+permissions:
+  contents: read
+  deployments: read
+
+jobs:
+  lhci-preview:
+    runs-on: ubuntu-latest
+    timeout-minutes: 25
+
+    steps:
+      - name: ⬇️ Checkout
+        uses: actions/checkout@v4
+
+      - name: 🟢 Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+
+      - name: 🔎 Wait for Vercel Deployment + grab Preview URL
+        id: vercel
+        uses: actions/github-script@v7
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const owner = context.repo.owner;
+            const repo = context.repo.repo;
+            const sha = context.payload.pull_request.head.sha;
+            const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+
+            for (let i = 0; i < 40; i++) {
+              const { data: deployments } = await github.rest.repos.listDeployments({
+                owner, repo, sha, per_page: 20,
+              });
+
+              const previewDeployments = deployments.filter(d =>
+                String(d.environment || "").toLowerCase().includes("preview")
+              );
+              const candidates = (previewDeployments.length ? previewDeployments : deployments)
+                .sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
+
+              if (candidates.length) {
+                const dep = candidates[0];
+                const { data: statuses } = await github.rest.repos.listDeploymentStatuses({
+                  owner, repo, deployment_id: dep.id, per_page: 20,
+                });
+
+                const success = statuses.find(s => s.state === "success" && s.target_url);
+                if (success?.target_url) {
+                  core.setOutput("preview_url", success.target_url);
+                  core.info(`Found preview URL: ${success.target_url}`);
+                  return;
+                }
+
+                const failure = statuses.find(s => (s.state === "error" || s.state === "failure"));
+                if (failure) throw new Error(`Deployment failed: ${failure.description || failure.state}`);
+              }
+
+              core.info(`Waiting for Vercel preview deployment... (${i + 1}/40)`);
+              await sleep(15000);
+            }
+
+            throw new Error("Timed out waiting for Vercel preview deployment URL.");
+
+      - name: 📦 Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.15.9
+          run_install: false
+
+      - name: 🔎 Run Lighthouse CI against Vercel Preview
+        env:
+          PREVIEW_URL: ${{ steps.vercel.outputs.preview_url }}
+        run: |
+          echo "Running Lighthouse CI on: $PREVIEW_URL"
+          pnpm dlx @lhci/cli collect --config=./.lighthouserc.json \
+            --url="$PREVIEW_URL/" \
+            --url="$PREVIEW_URL/orchestrators" \
+            --url="$PREVIEW_URL/leaderboard" \
+            --url="$PREVIEW_URL/transactions" \
+            --url="$PREVIEW_URL/voting" \
+            --url="$PREVIEW_URL/treasury"
+          pnpm dlx @lhci/cli assert  --config=./.lighthouserc.json
+          pnpm dlx @lhci/cli upload  --config=./.lighthouserc.json --target=temporary-public-storage

.lighthouserc.json

@@ -0,0 +1,24 @@
+{
+  "ci": {
+    "collect": {
+      "numberOfRuns": 2,
+      "settings": { "preset": "desktop", "formFactor": "desktop" }
+    },
+    "assert": {
+      "assertions": {
+        "categories:performance": ["error", { "minScore": 0.6 }],
+        "largest-contentful-paint": ["error", { "maxNumericValue": 3400 }],
+        "cumulative-layout-shift": ["error", { "maxNumericValue": 0.1 }],
+        "total-blocking-time": ["error", { "maxNumericValue": 425 }]
+      },
+      "baselinePerformanceMetrics": {
+        "description": "Baseline Lighthouse metrics used to derive the assertion thresholds above. Update these values when the application's performance characteristics change.",
+        "largest-contentful-paint-ms": 3400,
+        "cumulative-layout-shift": 0.1,
+        "total-blocking-time-ms": 425,
+        "performance-score": 0.6
+      }
+    },
+    "upload": { "target": "temporary-public-storage" }
+  }
+}

package.json

@@ -20,6 +20,7 @@
     "@graphql-codegen/typescript": "^2.7.2",
     "@graphql-codegen/typescript-operations": "^2.5.2",
     "@graphql-codegen/typescript-react-apollo": "^3.3.2",
+    "@lhci/cli": "^0.15.1",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
@@ -43,7 +44,8 @@
     "jest-environment-jsdom": "^30.2.0",
     "ts-node": "^10.9.2",
     "typechain": "^8.1.0",
-    "typescript": "5.1.6"
+    "typescript": "5.1.6",
+    "wait-on": "^9.0.3"
   },
   "dependencies": {
     "@apollo/client": "^3.13.1",

pages/index.tsx

@@ -23,7 +23,7 @@ import {
 import { ArrowRightIcon } from "@modulz/radix-icons";
 import { useChartData } from "hooks";
 import Link from "next/link";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 
 import {
   EventsQueryResult,
@@ -255,6 +255,14 @@ type PageProps = {
 };
 
 const Home = ({ hadError, orchestrators, events, protocol }: PageProps) => {
+  const [showOrchList, setShowOrchList] = useState(false);
+
+  useEffect(() => {
+    // Let the browser paint the new route first
+    const id = requestAnimationFrame(() => setShowOrchList(true));
+    return () => cancelAnimationFrame(id);
+  }, []);
+
   const allEvents = useMemo(
     () =>
       events?.transactions
@@ -403,11 +411,19 @@ const Home = ({ hadError, orchestrators, events, protocol }: PageProps) => {
               </Flex>
             ) : (
               <Box>
-                <OrchestratorList
-                  data={orchestrators?.transcoders}
-                  pageSize={10}
-                  protocolData={protocol?.protocol}
-                />
+                {showOrchList ? (
+                  <OrchestratorList
+                    data={orchestrators?.transcoders}
+                    pageSize={10}
+                    protocolData={protocol?.protocol}
+                  />
+                ) : (
+                  <Box
+                    css={{ padding: "$4", textAlign: "center", opacity: 0.6 }}
+                  >
+                    Loading orchestrators…
+                  </Box>
+                )}
               </Box>
             )}
 

pages/orchestrators.tsx

@@ -15,6 +15,7 @@ import {
 import { ArrowRightIcon } from "@modulz/radix-icons";
 import Head from "next/head";
 import Link from "next/link";
+import { useEffect, useState } from "react";
 
 import {
   getApollo,
@@ -34,6 +35,14 @@ const OrchestratorsPage = ({
   orchestrators,
   protocol,
 }: PageProps) => {
+  const [showOrchList, setShowOrchList] = useState(false);
+
+  useEffect(() => {
+    // Let the browser paint the new route first
+    const id = requestAnimationFrame(() => setShowOrchList(true));
+    return () => cancelAnimationFrame(id);
+  }, []);
+
   if (hadError) {
     return <ErrorComponent statusCode={500} />;
   }
@@ -76,11 +85,17 @@ const OrchestratorsPage = ({
             )}
           </Flex>
           <Box css={{ marginBottom: "$5" }}>
-            <OrchestratorList
-              data={orchestrators?.transcoders}
-              pageSize={20}
-              protocolData={protocol?.protocol}
-            />
+            {showOrchList ? (
+              <OrchestratorList
+                data={orchestrators?.transcoders}
+                pageSize={20}
+                protocolData={protocol?.protocol}
+              />
+            ) : (
+              <Box css={{ padding: "$4", textAlign: "center", opacity: 0.6 }}>
+                Loading orchestrators…
+              </Box>
+            )}
           </Box>
         </Flex>
       </Container>