Lite load perf ci (#8222)

* Update Lite E2E test setup to measure the performance of the initial app loading

* [TMP] Run test-functional on this branch

* Update CI to read the perf result

* add changeset

* Comment the performance result

* [TMP] hardcode the PR number to test posting the comment

* Revert "[TMP] hardcode the PR number to test posting the comment"

This reverts commit 4270dac.

* Revert "Comment the performance result"

This reverts commit df4c29f.

* Add debug echo

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Freddy Boulton <alfonsoboulton@gmail.com>
Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

.changeset/wet-seas-end.md

@@ -0,0 +1,5 @@
+---
+"@gradio/tootils": minor
+---
+
+feat:Lite load perf ci

.github/workflows/test-functional.yml

@@ -1,10 +1,11 @@
 name: "test / functional"
 
 on:
-  workflow_run:
-    workflows: ["trigger"]
-    types:
-      - requested
+  # workflow_run:
+  #   workflows: ["trigger"]
+  #   types:
+  #     - requested
+  pull_request: {}
 
 permissions:
   statuses: write
@@ -79,6 +80,11 @@ jobs:
         run: |
           . venv/bin/activate
           pnpm --filter @gradio/app test:browser:lite
+      - name: Get the performance result
+        run: |
+          export LITE_APP_LOAD_TIME=$(jq -r '.app_load_time' .lite-perf.json)
+          echo "LITE_APP_LOAD_TIME=$LITE_APP_LOAD_TIME" >> $GITHUB_ENV
+          cat .lite-perf.json  # For debugging
       - name: do check
         if: always()
         uses: "gradio-app/github/actions/commit-status@main"

js/tootils/src/index.ts

@@ -1,5 +1,6 @@
 import { test as base, type Locator, type Page } from "@playwright/test";
 import { spy } from "tinyspy";
+import { performance } from "node:perf_hooks";
 import url from "url";
 import path from "path";
 import fsPromises from "fs/promises";
@@ -47,7 +48,34 @@ const test_lite = base.extend<{ setup: void }>({
 		}
 		if (shared_page_for_lite.url() !== lite_url) {
 			await shared_page_for_lite.goto(lite_url);
+
+			performance.mark("opened");
+
 			testInfo.setTimeout(600000); // Lite takes a long time to initialize.
+
+			// Measure the time taken for the app to load.
+			shared_page_for_lite
+				.waitForSelector('css=[id^="component-"]', { state: "visible" })
+				.then(() => {
+					performance.mark("app-loaded");
+					const app_load_perf = performance.measure(
+						"app-load",
+						"opened",
+						"app-loaded"
+					);
+					const app_load_time = app_load_perf.duration;
+
+					const perf_file_content = JSON.stringify({ app_load_time }, null, 2);
+
+					fsPromises
+						.writeFile(
+							path.resolve(ROOT_DIR, `./.lite-perf.json`),
+							perf_file_content
+						)
+						.catch((err) => {
+							console.error("Failed to write the performance data.", err);
+						});
+				});
 		}
 		await use(shared_page_for_lite);
 	},