8000 Add TanStack Virtual to documents table for vertical virtualization by devin-ai-integration[bot] · Pull Request #291 · antiwork/flexile · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content
/ flexile Public

Add TanStack Virtual to documents table for vertical virtualization #291

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related em 8000 ails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Add TanStack Virtual to documents table for vertical virtualization #291

wants to merge 3 commits into from

Conversation

devin-ai-integration[bot]
Copy link
Contributor

Add TanStack Virtual to Documents Table

This PR implements vertical virtualization for the documents table using TanStack Virtual to improve performance on mobile devices.

Changes

  • Added @tanstack/react-virtual as a dependency
  • Modified the DataTable component to support optional virtualization
  • Updated the documents page to use virtualized table
  • Implemented vertical virtualization with default configuration

TanStack Virtual Configuration Options

The implementation uses the default configuration, but here's an overview of key configuration options that could be customized:

Core Options

  • count (required): The number of items to virtualize (set to the number of rows in the table)
  • estimateSize (required): Function that returns the estimated size of an item (set to a fixed row height)
  • getScrollElement (required): Function that returns the scrollable element reference
  • overscan: Number of items to render outside the visible area (default: 1, we set to 10 for smoother scrolling)

Additional Options

  • paddingStart/paddingEnd: Padding in pixels at the start/end of the virtualized list
  • scrollToFn: Custom scroll function for programmatic scrolling
  • initialOffset: Initial scroll offset in pixels
  • onChange: Callback fired when the virtualizer state changes
  • scrollMargin: Margin around the scrollable element to consider when calculating visible items
  • scrollPaddingStart/scrollPaddingEnd: Padding applied to the scroll container

Testing

The implementation was tested locally to ensure:

  • The documents table loads and functions correctly
  • Vertical virtualization is properly working (only rendering visible rows)
  • All existing functionality is maintained while improving performance

Link to Devin run

https://app.devin.ai/sessions/aeeb06a297474870a983946cf5f85c18

Requested by: sahil.lavingia@gmail.com

@devin-ai-integration @slavingia
Add TanStack Virtual to documents table for vertical virtualization
2cc3099 
Co-Authored-By: sahil.lavingia@gmail.com <sahil.lavingia@gmail.com>
@devin-ai-integration Devin.ai Integration
Copy link
Contributor Author

Original prompt from sahil.lavingia@gmail.com:

SYSTEM:
=== BEGIN THREAD HISTORY (in #flexile) ===
Sahil Lavingia (U024FUD6D): I’m unable to sign. Page doesn’t load on mobile

ATTACHMENT:"https://app.devin.ai/attachments/9466e4d4-a11a-4d92-bf3d-13a5469fafaf/IMG_9664.png"

Raul Popadineți (U01NY6D3SBC): I can look into it later tonight after we put Luiza to sleep. 

Raul Popadineți (U01NY6D3SBC): Looks like <@U021B8CKF6X> took care of it in <https://github.com/antiwork/flexile/pull/290>. Thank youuu! :purple_heart:

#290 Don't generate S3 download URLs ahead of time

Sahil Lavingia (U024FUD6D): Just seeing this. Skeleton loaders so the front-end loads instantly may be good (for all pages but this one especially)

ATTACHMENT:"https://app.devin.ai/attachments/dcb4a6dd-698a-44d6-b505-a68a9cb4f4f8/IMG_9683.png"

Sahil Lavingia (U024FUD6D): Can you login as me and see if you get the same behavior? <@U021B8CKF6X> 

Maya (U021B8CKF6X): I think we should consider bringing back pagination. We could add a skeleton loader but even with the S3 URL generation removed the page is going to take at least ten seconds to load and then be super laggy (especially on phones) because we're rendering so much.

Sahil Lavingia (U024FUD6D): Why would it take ten seconds if it’s cached in the back-end, and my phone loads plenty of 10k+ tables (contacts, google sheets) and can scroll through them quickly - via virtualization it shouldn’t be an issue?

Sahil Lavingia (U024FUD6D): If that takes too long, saving the filtered state and defaulting it to signing required if there isn’t one should also work for now?

Maya (U021B8CKF6X): We could add caching and virtualization, yeah, but that would be a bigger task (and may not be worth investing in doing in TRPC if we want to migrate away from it). I'll add the filter for now and we can discuss further on Monday

Sahil Lavingia (U024FUD6D): ah i thought virtualization was tanstack table stuff, so independent of rails vs trpc

Maya (U021B8CKF6X): yeah that we can do independently for sure, but it's not built-in, we'd have to add something like TanStack Virtual for that. happy to work on that though!

Sahil Lavingia (U024FUD6D): @Devin try adding <https://tanstack.com/virtual/latest> to the documents table

[attachment(s) from latest message omitted here, will be added below]
=== END THREAD HISTORY ===

The latest message is the one right above that tagged you.

@devin-ai-integration Devin.ai Integration
Copy link
Contributor Author

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

  • Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
  • Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

  • Disable automatic comment and CI monitoring

@coderabbitai coderabbitai
Copy link
coderabbitai bot commented May 10, 2025

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Join our Discord community for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@MayaRainer MayaRainer

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@MayaRainer
0