Framework7 Virtual List: How does it handle rapid scrolling with async data fetch?

Direct Answer

Framework7's Virtual List does not wait for asynchronous data provider functions. When scrolling faster than your fetch latency, the component renders blank or placeholder rows because the DOM recycling mechanism expects synchronous returns. There is no built-in caching or prefetching—you must implement both yourself.

Why Blank Rows Appear

The Virtual List maintains a fixed pool of DOM nodes (typically visible items + buffer). On scroll, it calculates which indices are visible and calls your renderItem / data provider for each index. If that provider returns a Promise, the component cannot pause rendering; it inserts an empty node and moves on. When the promise resolves later, the node may already have been recycled for a different index, causing a race condition where stale data populates the wrong row.

Strategies to Prevent Blank Rows

1. Synchronous cache layer – Wrap your async fetch in a local Map<number, Item>. The data provider checks the map first; if present, return the item synchronously. If absent, trigger the fetch, store a placeholder, and re-render the list when the fetch resolves (call virtualList.update()).
2. Debounce scroll-driven requests – Track the last requested index range. Only fire new fetches when the viewport has moved beyond a threshold (e.g., 50% of buffer size). This reduces duplicate requests for the same range during rapid scroll.
3. Render skeletons, not blanks – Return a lightweight skeleton/placeholder element synchronously from the provider. Replace its content when the async data arrives. This avoids layout shift and makes the UI feel responsive.
4. Cancel stale requests – Attach an AbortController to each fetch keyed by index. When the same index is requested again (e.g., scroll back), abort the previous request to prevent race conditions.

Caching & Prefetching: Not Built-In

Framework7 (v7/v8 as of 2024) exposes no cache, prefetch, or buffer configuration on the Virtual List component. The items prop / data provider is the only extension point. You control caching entirely in your provider implementation.

Manual Prefetch Implementation

const cache = new Map();
const inflight = new Map();

function dataProvider(index) {
  if (cache.has(index)) return cache.get(index);

  // Return skeleton synchronously
  const skeleton = { id: index, loading: true };

  // Fire fetch once per index
  if (!inflight.has(index)) {
    const controller = new AbortController();
    inflight.set(index, controller);
    fetch(`/api/items/${index}`, { signal: controller.signal })
      .then(r => r.json())
      .then(data => {
        cache.set(index, data);
        inflight.delete(index);
        virtualList.update(); // re-render with real data
      })
      .catch(() => {});
  }

  // Prefetch adjacent range (e.g., next 20 items)
  for (let i = index + 1; i <= index + 20; i++) {
    if (!cache.has(i) && !inflight.has(i)) {
      // same fetch logic without skeleton return
    }
  }

  return skeleton;
}

Verification Steps

1. Create a Virtual List with a provider that uses setTimeout(..., 300) to simulate network latency.
2. Scroll rapidly—observe blank rows.
3. Add the Map cache + skeleton pattern above; verify blanks disappear on re-scroll.
4. Check Framework7 docs for VirtualList API—confirm no cache or prefetch options exist in your version.

Assumptions & Uncertainty

• Behavior described matches Framework7 v7/v8 core Virtual List. If you use a framework-specific wrapper (Vue/React/Svelte), the same constraints apply because they delegate to the core implementation.
• Race-condition handling with AbortController assumes a modern browser environment; polyfill if targeting older runtimes.
• Needs verification: Exact buffer size calculation (default renderExternal buffer) may differ by version—inspect virtualList.params at runtime.

If you share your Framework7 version and whether you use the core, Vue, React, or Svelte package, I can confirm the exact buffer/defaults.