Function fetchWithProgress

website/src/pages/Explore.tsx:142–178

(
  url: string,
  onProgress: (loaded: number, total: number) => void
)

// FETCH WITH PROGRESS TRACKING
// ============================================================================
const fetchWithProgress = async (
  url: string,
  onProgress: (loaded: number, total: number) => void
): Promise<Response> => {
  const response = await fetch(url);
  if (!response.ok || !response.body) return response;

  const contentLength = response.headers.get("content-length");
  const total = contentLength ? parseInt(contentLength, 10) : 0;

  let loaded = 0;
  const reader = response.body.getReader();
  const stream = new ReadableStream({
    async start(controller) {
      try {
        while (true) {
          const { done, value } = await reader.read();
          if (done) {
            controller.close();
            break;
          }
          loaded += value.byteLength;
          onProgress(loaded, total);
          controller.enqueue(value);
        }
      } catch (err) {
        controller.error(err);
      }
    }
  });

  return new Response(stream, {
    headers: response.headers,
    status: response.status,
    statusText: response.statusText
  });
};

const Explore = () => {
  const [searchParams] = useSearchParams();