fix: Enhanced offline data handling capabilities for the data table when infinite scroll is enabled.#40632
Conversation
…nfinite scroll is enabled. Neither network failures nor query failures should lead the table into a state where it is unable to load the data for that page.
rahulbarwal
requested review from
AmanAgarwal041
and removed request for
jacquesikot
WalkthroughThe changes enhance the infinite scroll mechanism in the TableWidgetV2 by introducing page-aware loading, explicit data caching, and event-based page updates. New props for cached data and page update functions are added and propagated through the component hierarchy, and memoization is updated to account for cached data changes. Changes
Sequence Diagram(s)sequenceDiagram
participant Widget
participant ReactTableComponent
participant Table
participant InfiniteScrollBody
participant useInfiniteScroll
Widget->>ReactTableComponent: Pass cachedTableData
ReactTableComponent->>Table: Pass cachedTableData
Table->>InfiniteScrollBody: Pass cachedTableData, updatePageNo
InfiniteScrollBody->>useInfiniteScroll: Use cachedTableData, updatePageNo
useInfiniteScroll->>useInfiniteScroll: On scroll event, check cachedTableData
alt Data not cached
useInfiniteScroll->>updatePageNo: Trigger load for next page (ON_NEXT_PAGE)
end
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Tip ⚡️ Faster reviews with caching
Enjoy the performance boost—your workflow just got faster. 📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (8)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page 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)
Other keywords and placeholders
Documentation and Community
|
github-actions
bot
added
Bug
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🔭 Outside diff range comments (1)
app/client/src/widgets/TableWidgetV2/component/VirtualTable/InifiniteScrollBody/useInfiniteScroll.tsx (1)
63-65:⚠️ Potential issueMissing deps will cause stale closures
debouncedLoadMoreusesupdatePageNoandcachedTableData, but they are not listed in the dependency array.
If either changes (e.g. widget re-initialises, new cache object), the callback will still reference the old values, leading to pages never loading or loading twice.- [isLoading, endOfData, loadMore], + [isLoading, endOfData, loadMore, updatePageNo, cachedTableData],
🧹 Nitpick comments (2)
app/client/src/widgets/TableWidgetV2/component/VirtualTable/InifiniteScrollBody/useInfiniteScroll.tsx (2)
40-57:loadMoreparam is now redundantInside the debounced callback you no longer call
loadMore; the new flow relies onupdatePageNo.
Consider droppingloadMorefromUseInfiniteScrollPropsto avoid confusion and dead code paths.
34-35:lastPageInTableDatasetrecalculated every renderSince it derives directly from
rows.lengthandpageSize, memoising it withuseMemowould avoid recomputation and make the dependency list explicit. Not critical, but keeps renders lean.
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
app/client/src/widgets/TableWidgetV2/component/VirtualTable/InifiniteScrollBody/index.tsx(2 hunks)app/client/src/widgets/TableWidgetV2/component/VirtualTable/InifiniteScrollBody/useInfiniteScroll.tsx(2 hunks)app/client/src/widgets/TableWidgetV2/component/index.tsx(3 hunks)app/client/src/widgets/TableWidgetV2/component/types.ts(1 hunks)app/client/src/widgets/TableWidgetV2/widget/index.tsx(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (5)
- GitHub Check: client-lint / client-lint
- GitHub Check: client-check-cyclic-deps / check-cyclic-dependencies
- GitHub Check: client-unit-tests / client-unit-tests
- GitHub Check: client-build / client-build
- GitHub Check: client-prettier / prettier-check
🔇 Additional comments (7)
app/client/src/widgets/TableWidgetV2/widget/index.tsx (1)
1305-1305: Appropriate prop forwarding for cached table data.The new
cachedTableDataprop is correctly passed from the widget to theReactTableComponent, enabling offline data handling for the infinite scroll table.app/client/src/widgets/TableWidgetV2/component/VirtualTable/InifiniteScrollBody/index.tsx (2)
16-17: Properly destructure required props from context.The component now correctly retrieves
cachedTableDataandupdatePageNofrom the table context.Also applies to: 24-24
33-34: Enhanced infinite scroll with cached data support.The
useInfiniteScrollhook now receivesupdatePageNoandcachedTableDataparameters, enabling page-aware loading and preventing redundant data fetches during network failures.app/client/src/widgets/TableWidgetV2/component/types.ts (1)
84-84: Proper type definition for cached data.The
TablePropsinterface has been correctly extended with acachedTableDataproperty of typeArray<Record<string, unknown>>, maintaining type consistency with the table data structure.app/client/src/widgets/TableWidgetV2/component/index.tsx (3)
112-112: Well-defined prop interface for cached data.The
ReactTableComponentPropsinterface has been properly extended with thecachedTableDataproperty, ensuring type safety throughout the component.
247-247: Appropriate prop passing to child component.The
cachedTableDataprop is correctly forwarded to theTablecomponent, maintaining consistent data flow through the component hierarchy.
361-362: Updated memoization with proper equality check.The memoization comparison now includes a deep equality check for
cachedTableDatausing theequalfunction, preventing unnecessary re-renders when the cached data references change but the content remains the same.
...t/src/widgets/TableWidgetV2/component/VirtualTable/InifiniteScrollBody/useInfiniteScroll.tsx
Show resolved
Hide resolved
...t/src/widgets/TableWidgetV2/component/VirtualTable/InifiniteScrollBody/useInfiniteScroll.tsx
Show resolved
Hide resolved
|
/build-deploy-preview skip-tests=true |
|
Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/14969000435. |
|
Deploy-Preview-URL: https://ce-40632.dp.appsmith.com |
…g conditions and add debug logging. - Added a check to ensure that `cachedTableData[pageToLoad]` has data before attempting to load more. - Updated the end-of-data condition to consider the online status of the user, ensuring more reliable data handling during network fluctuations.
|
/build-deploy-preview skip-tests=true |
|
Deploying Your Preview: https://github.com/appsmithorg/appsmith/actions/runs/14990261999. |
|
Deploy-Preview-URL: https://ce-40632.dp.appsmith.com |
rahulbarwal
added
ok-to-test
…enhance data handling verification.
rahulbarwal
deleted the
rahulbarwal/issue40579/Bug-Infinte-scroll-After-Network-Failure-an-error-message-is-displayed-later-the-the-user-is-not-able-to-retry-loading-data
branch
2 participants
Description
Problem
Table failed to load data for a page when network or query failures occurred with infinite scroll enabled.
Root cause
There was no fallback or handling mechanism for offline scenarios or query failures, causing the table to enter an unusable state.
Solution
This PR handles enhancing offline data handling for the table when infinite scroll is enabled.
We ensure that a data fetch request for the next page is triggered regardless of the scenario.
Fixes #40579
or
Fixes
Issue URLWarning
If no issue exists, please create an issue first, and check with the maintainers if the issue is valid.
Automation
/ok-to-test tags="@tag.Table"
🔍 Cypress test results
Tip
🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
Workflow run: https://github.com/appsmithorg/appsmith/actions/runs/15011754024
Commit: 9c48e7c
Cypress dashboard.
Tags:
@tag.TableSpec:
Wed, 14 May 2025 04:22:05 UTC
Communication
Should the DevRel and Marketing teams inform users about this change?
Summary by CodeRabbit
Summary by CodeRabbit