Skip to content

Commit

Permalink
[DevOverlay] Keep pagination on Build Error (vercel#74905)
Browse files Browse the repository at this point in the history
Don't hide pagination even if there are no "readyErrors" (Runtime Error).

**Note:** Better review with "hide whitespace".

### Before

![CleanShot 2025-01-15 at 15 08 00](https://github.com/user-attachments/assets/468e0424-bae2-4ae6-931e-e691bd520f3c)

### After

![CleanShot 2025-01-15 at 15 08 07](https://github.com/user-attachments/assets/52f412f4-b5be-49bd-9867-66164766926f)

Closes NDX-665
  • Loading branch information
devjiwonchoi authored Jan 16, 2025
1 parent 354a494 commit 89b0957
Showing 1 changed file with 39 additions and 41 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -116,47 +116,45 @@ export function ErrorOverlayPagination({
}, [nav, activeIdx, readyErrors.length])

return (
<>
{readyErrors.length > 0 && (
<nav
className="error-overlay-pagination dialog-exclude-closing-from-outside-click"
ref={onNav}
>
<button
ref={buttonLeft}
type="button"
disabled={activeIdx === 0}
aria-disabled={activeIdx === 0}
onClick={handlePrevious}
className="error-overlay-pagination-button"
>
<LeftArrow
title="previous"
className="error-overlay-pagination-button-icon"
/>
</button>
<div className="error-overlay-pagination-count">
<span>{activeIdx + 1}/</span>
<span data-nextjs-dialog-header-total-count>
{readyErrors.length}
</span>
</div>
<button
ref={buttonRight}
type="button"
disabled={activeIdx === readyErrors.length - 1}
aria-disabled={activeIdx === readyErrors.length - 1}
onClick={handleNext}
className="error-overlay-pagination-button"
>
<RightArrow
title="next"
className="error-overlay-pagination-button-icon"
/>
</button>
</nav>
)}
</>
<nav
className="error-overlay-pagination dialog-exclude-closing-from-outside-click"
ref={onNav}
>
<button
ref={buttonLeft}
type="button"
disabled={activeIdx === 0}
aria-disabled={activeIdx === 0}
onClick={handlePrevious}
className="error-overlay-pagination-button"
>
<LeftArrow
title="previous"
className="error-overlay-pagination-button-icon"
/>
</button>
<div className="error-overlay-pagination-count">
<span>{activeIdx + 1}/</span>
<span data-nextjs-dialog-header-total-count>
{/* Display 1 out of 1 if there are no errors (e.g. for build errors). */}
{readyErrors.length || 1}
</span>
</div>
<button
ref={buttonRight}
type="button"
// If no errors or the last error is active, disable the button.
disabled={activeIdx >= readyErrors.length - 1}
aria-disabled={activeIdx >= readyErrors.length - 1}
onClick={handleNext}
className="error-overlay-pagination-button"
>
<RightArrow
title="next"
className="error-overlay-pagination-button-icon"
/>
</button>
</nav>
)
}

Expand Down

0 comments on commit 89b0957

Please sign in to comment.