perf: Lazy-load loader input/output to reduce data volume by 90%+

[Copilot]

Loader data includes input and result code strings that can reach hundreds of KB per loader, causing transfer sizes of 100+ MB and UI degradation. These fields are rarely viewed but always transmitted.

Changes

API Layer - Strip large fields from detail responses

• getLoaderFileDetails() now omits input/result fields
• GetLoaderFileInputAndOutput API correctly fetches code on-demand (fixed implementation bug)
• Type signature updated: Omit<LoaderTransformData, 'input' | 'result'>

UI Layer - Fetch code when user views it

• LoaderExecutions component lazy-loads via useEffect when "Loader Details" tab becomes active
• Loading spinner during fetch
• Simplified dependency array to avoid stale closures

// Before: input/result always included in loader data
const loader = loaders[currentIndex];
const before = loader.input || '';

// After: fetch on-demand when tab is viewed
useEffect(() => {
  if (activeKey === 'loaderDetails' && dataLoader) {
    dataLoader
      .loadAPI(SDK.ServerAPI.API.GetLoaderFileInputAndOutput, {
        file: resource.path,
        loader: loader.loader,
        loaderIndex: loader.loaderIndex,
      })
      .then(setLoaderCode);
  }
}, [currentIndex, activeKey, resource.path, dataLoader]);

Impact: Initial loader detail requests reduced from ~hundreds of KB to ~10 KB per file. Code still available but fetched only when user switches to code view tab.

Original prompt

This issue occurs because the loader data, including result codes, becomes too large and degrades UI performance, especially when navigating the loader timeline or analysis views in rsdoctor. Large datasets like module graphs, chunk graphs, and loader results can amount to hundreds of megabytes, causing loading times of 30 seconds or more, or even failure under certain modern browsers.

To address this:

1. Reduce Loader Data Volume: Avoid unnecessarily storing large outputs like loader result codes. Consider stripping or summarizing this information.

2. Lazy Loading: Implement lazy loading for heavy data blobs. For example, load metadata and indexes upfront, and defer details or render them dynamically when users interact with UI elements like the loader timeline.

3. Data Compression: Compress the data before shipping to the UI. On the backend side, ensure effective JSON minification and redundant object elimination when possible.

4. Pagination or Chunking: Break down large data chunks into smaller, more manageable fragments, both on the UI and API endpoints. Enabling pagination could avoid hitting browser memory limits.

5. Browser Rendering Optimization: Update the UI tooling to render large lists using windowing libraries such as react-window or react-virtualized. These libraries optimize DOM rendering for large datasets.

6. Profiling Usage: Set up performance benchmarks to confirm areas with maximum lag, particular scenarios that demand higher heap memory (e.g., Chrome Dev Tools) while debugging rsdoctor parser loops.

This pull request was created from Copilot chat.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Related MR: #1521

[cloudflare-workers-and-pages]

Deploying rsdoctor with    Cloudflare Pages

Latest commit:	e36dcfb
Status:	✅  Deploy successful!
Preview URL:	https://33ddd113.rsdoctor.pages.dev
Branch Preview URL:	https://copilot-reduce-loader-data-v.rsdoctor.pages.dev

View logs

[Copilot]

Pull request overview

Reduces loader-related payload sizes by removing large input/result code blobs from loader detail responses and fetching them only when needed, improving UI responsiveness for large manifests.

Changes:

• Strip input/result from getLoaderFileDetails() and update the GetLoaderFileDetails response type accordingly.
• Fix APIDataLoader routing for GetLoaderFileInputAndOutput to correctly fetch per-loader code on demand.
• Update LoaderExecutions to request loader code via GetLoaderFileInputAndOutput, and add unit tests for the new behavior.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
packages/utils/src/common/loader.ts	Omits large input/result fields from loader details response.
packages/utils/src/common/data/index.ts	Fixes GetLoaderFileInputAndOutput dispatch to call the correct loader utility with correct params.
packages/types/src/sdk/server/apis/loader.ts	Updates API response typing for GetLoaderFileDetails to omit input/result.
packages/components/src/components/Loader/executions.tsx	Switches loader code display to on-demand fetching via ServerAPIProvider.
packages/utils/tests/common/loader.test.ts	Adds tests asserting stripped fields and on-demand input/output retrieval.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.