fix: user table to load on scroll

[ChayanDass]

What does this PR do?

Improves the Users table experience by adding a user count indicator and refining infinite scroll behavior.

Changes

• Display the number of loaded users out of the total available users (Showing X of Y).

• Show a loading message while the initial user list is being fetched.

• Pass the table container reference to fetchMoreOnBottomReached when handling scroll events.

• Improve layout spacing between the search input and the users table.

• Fixes scroll doesn't load more users, no loaded count indicator, missing spacing #29590

Visual Demo (For contributors especially)

Before:

• No indication of how many users were loaded.
• No loading state during the initial fetch.
• Infinite scroll relied on internal container access.

After:

Screencast.from.2026-06-17.11-25-03.webm

• Displays Showing X of Y users.
• Displays a loading state while fetching users.
• Infinite scroll explicitly uses the current table container reference.
• Improved spacing between search and table content.

Mandatory Tasks (DO NOT REMOVE)

• I have self-reviewed the code (A decent size PR without self-review might be rejected).
• I have updated the developer docs if this PR makes changes that would require a documentation change. If N/A, write N/A here and check the checkbox. (N/A)
• I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

1. Navigate to the Users page.
2. Verify that the table loads successfully.
3. Confirm that a loading indicator is shown while the initial request is in progress.
4. Confirm that the text Showing X of Y appears after users are loaded.
5. Scroll to the bottom of the table and verify that additional users are loaded.
6. Verify that the user count updates as more records are fetched.

Expected Result

• The number of loaded users is displayed.
• Infinite scrolling continues to load additional records when reaching the bottom of the table.
• No regressions in search functionality or table rendering.

Checklist

• I have read the contributing guide.
• My code follows the style guidelines of this project.
• I have commented my code where necessary.
• I have checked that my changes generate no new warnings.
• This PR is small and focused on a single improvement.

[github-actions]

Welcome to Cal.diy, @ChayanDass! Thanks for opening this pull request.

A few things to keep in mind:

• This is Cal.diy, not Cal.com. Cal.diy is a community-driven, fully open-source fork of Cal.com licensed under MIT. Your changes here will be part of Cal.diy — they will not be deployed to the Cal.com production app.
• Please review our Contributing Guidelines if you haven't already.
• Make sure your PR title follows the Conventional Commits format.

A maintainer will review your PR soon. Thanks for contributing!

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

In UsersTable, the JSX layout is updated to wrap the search input in a new flex-column container. A conditional status paragraph is added that renders a loading label when fetching with no rows, or a localized "showing X of Y" count otherwise. The table container's onScroll handler is changed to pass tableContainerRef.current to the existing infinite-scroll callback, enabling it to evaluate scroll position when determining whether to fetch the next page. In the backend handler, the separate prisma.user.count() call is consolidated into a single prisma.$transaction that executes both the paginated user query and the total count query, returning both results as [users, getTotalUsers].

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix: user table to load on scroll' accurately reflects the main change—fixing infinite scroll pagination in the users table.
Description check	✅ Passed	The description is well-related to the changeset, clearly detailing the improvements to the users table including user count display, loading state, infinite scroll fix, and layout improvements.
Linked Issues check	✅ Passed	The PR addresses all primary objectives from #29590: infinite scroll now receives the correct container reference [#29590], a 'Showing X of Y' counter displays loaded vs. total users [#29590], and layout spacing is improved [#29590]. The transaction-based query optimization further supports reliable pagination.
Out of Scope Changes check	✅ Passed	All changes are within scope: UsersTable updates implement the UI changes (counter, loading state, scroll fix, spacing), and the handler transaction improves data consistency for pagination.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

🧹 Nitpick comments (1)

apps/web/modules/users/components/UsersTable.tsx (1)

127-127: ⚡ Quick win

Pass the scroll event’s current target directly to the fetch callback.

At Line 127, use e.currentTarget instead of tableContainerRef.current so the infinite-scroll check always evaluates the element that actually fired the scroll event.

Suggested diff

-        onScroll={() => fetchMoreOnBottomReached(tableContainerRef.current)}
+        onScroll={(e) => fetchMoreOnBottomReached(e.currentTarget)}

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@apps/web/modules/users/components/UsersTable.tsx` at line 127, In the
onScroll event handler callback for the table container, replace the argument
passed to fetchMoreOnBottomReached from tableContainerRef.current to
e.currentTarget. This ensures the infinite-scroll check evaluates the actual
element that fired the scroll event rather than a potentially stale ref value.
Update the onScroll arrow function to accept the scroll event parameter and pass
e.currentTarget to the fetchMoreOnBottomReached function.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@apps/web/modules/users/components/UsersTable.tsx`:
- Line 127: In the onScroll event handler callback for the table container,
replace the argument passed to fetchMoreOnBottomReached from
tableContainerRef.current to e.currentTarget. This ensures the infinite-scroll
check evaluates the actual element that fired the scroll event rather than a
potentially stale ref value. Update the onScroll arrow function to accept the
scroll event parameter and pass e.currentTarget to the fetchMoreOnBottomReached
function.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: e581dfa5-ef86-49ae-9ada-3234d43924fa

📥 Commits

Reviewing files that changed from the base of the PR and between 561cf88 and c2e24a4.

📒 Files selected for processing (1)

• apps/web/modules/users/components/UsersTable.tsx

[CLAassistant]

All committers have signed the CLA.

[ChayanDass]

Before, it always showed the total user count instead of the filtered total user count

[coderabbitai]

🧹 Nitpick comments (1)

packages/trpc/server/routers/viewer/admin/listPaginated.handler.ts (1)

17-17: ⚡ Quick win

Remove stale commented-out query code.

This dead line is no longer needed after the transaction refactor and adds noise during maintenance.

As per coding guidelines, “Only add code comments that explain why, not what” and avoid non-actionable/commented-out code.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/trpc/server/routers/viewer/admin/listPaginated.handler.ts` at line
17, Remove the commented-out line containing the getTotalUsers query in
listPaginated.handler.ts. The line `// const getTotalUsers = await
prisma.user.count();` is stale code from before the transaction refactor and
adds unnecessary noise to the file. Delete this entire commented line as it
violates the coding guideline of not including commented-out or dead code in the
codebase.

Source: Coding guidelines

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@packages/trpc/server/routers/viewer/admin/listPaginated.handler.ts`:
- Line 17: Remove the commented-out line containing the getTotalUsers query in
listPaginated.handler.ts. The line `// const getTotalUsers = await
prisma.user.count();` is stale code from before the transaction refactor and
adds unnecessary noise to the file. Delete this entire commented line as it
violates the coding guideline of not including commented-out or dead code in the
codebase.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 029e3e5c-ce3d-4931-a4b2-ea1103dc69f0

📥 Commits

Reviewing files that changed from the base of the PR and between 58a655e and 25838f5.

📒 Files selected for processing (1)

• packages/trpc/server/routers/viewer/admin/listPaginated.handler.ts

[bandhan-majumder]

nice catch. left some comments!

[ChayanDass]

I've checked the relevant edge cases and everything appears to be working fine. Please take a look!

I also think there’s scope for improvement by adding more filtering options. If that's something we'd like to support, I'd be happy to open a separate PR for it.