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.