Reduce load times of all components (#13041)

* lazy load info

* add changeset

* add changeset

* fix cache

* test fix

* check file exists

* inline markdown utility

* format

* fixes

* fix profiling

* add changeset

* add changeset

* median time

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Freddy Boulton <41651716+freddyaboulton@users.noreply.github.com>

Author: 3 people

.changeset/some-zebras-behave.md

@@ -0,0 +1,6 @@
+---
+"@gradio/atoms": patch
+"gradio": patch
+---
+
+fix:Reduce load times of all components

.github/actions/install-all-deps/action.yml

@@ -101,7 +101,7 @@ runs:
       if: inputs.skip_gradio_install != 'true' && inputs.os == 'ubuntu-latest'
       run: |
         . ${{ env.VENV_ACTIVATE }}
-        python scripts/generate_css_vars_docs.py
+        [ -f scripts/generate_css_vars_docs.py ] && python scripts/generate_css_vars_docs.py || true
     - name: generate json
       shell: bash
       if: inputs.skip_gradio_install != 'true' && inputs.os == 'ubuntu-latest'

.github/workflows/frontend_profiling.yml

@@ -33,35 +33,57 @@ jobs:
         id: latest_tag
         run: echo "tag=$(git tag --list 'gradio@*' --sort=-v:refname | head -n 1)" >> "$GITHUB_OUTPUT"
 
-      - name: Restore base benchmark cache
+      - name: Setup Python
         if: steps.changes.outputs.should_run == 'true'
-        id: base_cache
-        uses: actions/cache@v4
+        uses: actions/setup-python@v5
+        with:
+          python-version: "3.10"
+
+      - name: Install uv
+        if: steps.changes.outputs.should_run == 'true'
+        run: curl -LsSf https://astral.sh/uv/0.9.2/install.sh | sh
+
+      - name: Install pnpm
+        if: steps.changes.outputs.should_run == 'true'
+        uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # @v4
         with:
-          path: /tmp/bench_base.json
-          key: frontend-bench-base-${{ steps.latest_tag.outputs.tag }}
+          version: 10.17.0
+
+      - name: Setup Node.js
+        if: steps.changes.outputs.should_run == 'true'
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24
+          cache: pnpm
+          cache-dependency-path: pnpm-lock.yaml
 
       - name: Checkout latest release
-        if: steps.changes.outputs.should_run == 'true' && steps.base_cache.outputs.cache-hit != 'true'
+        if: steps.changes.outputs.should_run == 'true'
         run: git checkout ${{ steps.latest_tag.outputs.tag }}
 
-      - name: Install dependencies
-        if: steps.changes.outputs.should_run == 'true' && steps.base_cache.outputs.cache-hit != 'true'
-        uses: "gradio-app/gradio/.github/actions/install-all-deps@main"
-        with:
-          python_version: "3.10"
-          os: "ubuntu-latest"
+      - name: Create venv and install Python deps (base)
+        if: steps.changes.outputs.should_run == 'true'
+        run: |
+          export PATH="$HOME/.cargo/bin:$PATH"
+          uv venv venv --python=3.10
+          . venv/bin/activate
+          uv pip install -e client/python
+          uv pip install -e ".[oauth,mcp]"
+
+      - name: Install frontend deps and build (base)
+        if: steps.changes.outputs.should_run == 'true'
+        run: pnpm i --frozen-lockfile --ignore-scripts && pnpm css && pnpm build
 
       - name: Install Playwright (base)
-        if: steps.changes.outputs.should_run == 'true' && steps.base_cache.outputs.cache-hit != 'true'
+        if: steps.changes.outputs.should_run == 'true'
         run: pnpm exec playwright install chromium
 
       - name: Checkout benchmark spec and demo from PR
-        if: steps.changes.outputs.should_run == 'true' && steps.base_cache.outputs.cache-hit != 'true'
+        if: steps.changes.outputs.should_run == 'true'
         run: git checkout ${{ github.event.pull_request.head.sha }} -- js/spa/test/big_complex_demo.spec.ts demo/big_complex_demo
 
       - name: Run benchmark (base)
-        if: steps.changes.outputs.should_run == 'true' && steps.base_cache.outputs.cache-hit != 'true'
+        if: steps.changes.outputs.should_run == 'true'
         run: |
           . venv/bin/activate
           PERF_RESULTS_FILE=/tmp/bench_base.json pnpm exec playwright test \
@@ -74,36 +96,16 @@ jobs:
           git clean -fd
           git checkout -f ${{ github.event.pull_request.head.sha }}
 
-      - name: Setup Python (PR)
-        if: steps.changes.outputs.should_run == 'true'
-        uses: actions/setup-python@v5
-        with:
-          python-version: "3.10"
-
-      - name: Install pnpm (PR)
-        if: steps.changes.outputs.should_run == 'true'
-        uses: pnpm/action-setup@fe02b34f77f8bc703788d5817da081398fad5dd2 # @v4
-        with:
-          version: 10.17.0
-
-      - name: Setup Node.js (PR)
-        if: steps.changes.outputs.should_run == 'true'
-        uses: actions/setup-node@v4
-        with:
-          node-version: 24
-          cache: pnpm
-          cache-dependency-path: pnpm-lock.yaml
-
       - name: Install and build PR
         if: steps.changes.outputs.should_run == 'true'
         run: |
-          command -v uv >/dev/null 2>&1 || { curl -LsSf https://astral.sh/uv/0.9.2/install.sh | sh && export PATH="$HOME/.cargo/bin:$PATH"; }
+          export PATH="$HOME/.cargo/bin:$PATH"
           uv venv venv --python=3.10
           . venv/bin/activate
           uv pip install -e client/python
           uv pip install -e ".[oauth,mcp]"
           pnpm install --no-frozen-lockfile
-          pnpm build
+          pnpm css && pnpm build
 
       - name: Install Playwright (PR)
         if: steps.changes.outputs.should_run == 'true'

js/atoms/package.json

@@ -8,7 +8,6 @@
 	"license": "ISC",
 	"dependencies": {
 		"@gradio/icons": "workspace:^",
-		"@gradio/markdown-code": "workspace:^",
 		"@gradio/utils": "workspace:^"
 	},
 	"peerDependencies": {

js/atoms/src/BlockTitle.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { default as Info } from "./Info.svelte";
+	import Info from "./Info.svelte";
+
 	export let show_label = true;
 	export let info: string | undefined = undefined;
 	export let rtl = false;

js/atoms/src/Info.svelte

@@ -1,22 +1,28 @@
 <script lang="ts">
-	import { MarkdownCode as Markdown } from "@gradio/markdown-code";
+	import { render_inline_markdown } from "./inline-markdown";
 	export let info: string;
 </script>
 
-<div>
-	<Markdown message={info} sanitize_html={true} />
+<div class="info-text">
+	{@html render_inline_markdown(info)}
 </div>
 
 <style>
-	div > :global(.md.prose) {
+	.info-text {
 		font-weight: var(--block-info-text-weight);
 		font-size: var(--block-info-text-size);
 		line-height: var(--line-sm);
-	}
-	div > :global(.md.prose *) {
 		color: var(--block-info-text-color);
-	}
-	div {
 		margin-bottom: var(--spacing-md);
 	}
+	.info-text :global(a) {
+		color: var(--link-text-color);
+		text-decoration: underline;
+	}
+	.info-text :global(code) {
+		background: var(--code-background-fill);
+		padding: 0.1em 0.3em;
+		border-radius: 3px;
+		font-size: 0.9em;
+	}
 </style>