DEV Community

Cover image for Fixing an Infinite Loading State in the npmx Code Browser
Anil Singha
Anil Singha

Posted on

Fixing an Infinite Loading State in the npmx Code Browser

#devchallenge #bugsmash #opensource #typescript

Summer Bug Smash: Clear the Lineup 🐛🛹

This is a submission for DEV's Summer Bug Smash: Clear the Lineup powered by Sentry.

Project Overview

npmx is an open-source package explorer for the npm ecosystem. It helps developers inspect package metadata, releases, dependencies, documentation, comparisons, and published source files.

Bug Fix or Performance Improvement

The npmx code browser has a fallback for files that exceed its supported display size. It should show a “File too large” warning and provide an option to open the raw file.

Instead, selecting an oversized file left the page displaying its loading state indefinitely.

The issue can be reproduced here:

https://npmx.dev/package-code/@types/vscode/v/1.118.0/index.d.ts

The corrected behaviour can be verified on the PR preview:

https://npmx-h3s403v0g-npmx.vercel.app/package-code/@types/vscode/v/1.118.0/index.d.ts

Code

GitHub issue: https://github.com/npmx-dev/npmx.dev/issues/2732

Pull request: https://github.com/npmx-dev/npmx.dev/pull/3120

The production fix is one line:

if (isFileTooLarge.value) return false
Enter fullscreen mode Exit fullscreen mode

It was added to the page’s loading-state calculation:

const isLoading = computed<boolean>(() => {
  if (!isViewingFile.value) {
    return treeStatus.value !== 'success' && treeStatus.value !== 'error'
  }

  if (isFileTooLarge.value) return false

  return !fileStatus.value || fileStatus.value === 'pending' || fileStatus.value === 'idle'
})
Enter fullscreen mode Exit fullscreen mode

My Improvements

The page already knew when a selected file exceeded the size limit. In that situation, it intentionally skipped the file-content request.

Because the request never started, its status remained idle. The loading logic treated that status as if the file were still waiting to load, so the loading skeleton prevented the existing fallback from appearing.

The new condition makes the page stop reporting a loading state when the file is already known to be too large. This allows the existing warning and raw-file action to render without changing the server limit or downloading unnecessary content.

I also added a regression test that verifies:

  • The large-file warning is displayed.
  • The page does not remain in its loading state.
  • The file-content endpoint is not called.
  • The raw-file action points to the correct jsDelivr URL.

The code change is small, but it fixes an important state-handling edge case: an idle request is not always waiting to begin. Sometimes the application has intentionally decided that it should not run.

Top comments (0)