[GH-ISSUE #1241] [Bug]: Transactions list scrolling is jittery #7405

Closed
opened 2026-04-10 17:13:34 -05:00 by GiteaMirror · 10 comments
Owner

Originally created by @joel-jeremy on GitHub (Jul 1, 2023).
Original GitHub issue: https://github.com/actualbudget/actual/issues/1241

Verified issue does not already exist?

  • I have searched and found no existing issue

What happened?

Scrolling through the transactions table is a bit jittery and the table itself is moving when scrolling.

https://github.com/actualbudget/actual/assets/20313680/8863b627-ff3d-4bd1-b8d9-0f4147aca6c7

What error did you receive?

No response

Where are you hosting Actual?

Fly.io

What browsers are you seeing the problem on?

Chrome

Operating System

Mobile Device

Originally created by @joel-jeremy on GitHub (Jul 1, 2023). Original GitHub issue: https://github.com/actualbudget/actual/issues/1241 ### Verified issue does not already exist? - [X] I have searched and found no existing issue ### What happened? Scrolling through the transactions table is a bit jittery and the table itself is moving when scrolling. https://github.com/actualbudget/actual/assets/20313680/8863b627-ff3d-4bd1-b8d9-0f4147aca6c7 ### What error did you receive? _No response_ ### Where are you hosting Actual? Fly.io ### What browsers are you seeing the problem on? Chrome ### Operating System Mobile Device
GiteaMirror added the bug label 2026-04-10 17:13:34 -05:00
Author
Owner

@j-f1 commented on GitHub (Jul 1, 2023):

It looks like something is computing the height of the viewport wrong

<!-- gh-comment-id:1615328708 --> @j-f1 commented on GitHub (Jul 1, 2023): It looks like something is computing the height of the viewport wrong
Author
Owner

@MatissJanis commented on GitHub (Jul 1, 2023):

Related: https://github.com/actualbudget/actual/issues/655

<!-- gh-comment-id:1615966915 --> @MatissJanis commented on GitHub (Jul 1, 2023): Related: https://github.com/actualbudget/actual/issues/655
Author
Owner

@j-f1 commented on GitHub (Jul 2, 2023):

I’m trying to reproduce this locally in both Safari and Chrome (macOS) and am unable to, even if I artificially inflate the number of transactions by 100x. Could there be some factor I’m missing?

From a799a556093d9409c1e3edafae9ac1e1f78288cb Mon Sep 17 00:00:00 2001
From: Jed Fox <git@jedfox.com>
Date: Sun, 2 Jul 2023 12:28:36 -0400
Subject: [PATCH] artificially inflate the number of transactions

---
 .../desktop-client/src/components/accounts/Account.js  | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/desktop-client/src/components/accounts/Account.js b/packages/desktop-client/src/components/accounts/Account.js
index 998825bf..b995a1f8 100644
--- a/packages/desktop-client/src/components/accounts/Account.js
+++ b/packages/desktop-client/src/components/accounts/Account.js
@@ -1242,7 +1242,15 @@ class AccountInternal extends PureComponent {
 
         this.setState(
           {
-            transactions: data,
+            // artificially inflate the number of transactions
+            transactions: Array(100)
+              .fill(data)
+              .flatMap((ts, i) =>
+                ts.map(t => ({
+                  ...t,
+                  id: `${t.id}-${i}`,
+                })),
+              ),
             transactionCount: this.paged.getTotalCount(),
             transactionsFiltered: isFiltered,
             loading: false,
-- 
2.38.1
<!-- gh-comment-id:1616722102 --> @j-f1 commented on GitHub (Jul 2, 2023): I’m trying to reproduce this locally in both Safari and Chrome (macOS) and am unable to, even if I artificially inflate the number of transactions by 100x. Could there be some factor I’m missing? <details> ```patch From a799a556093d9409c1e3edafae9ac1e1f78288cb Mon Sep 17 00:00:00 2001 From: Jed Fox <git@jedfox.com> Date: Sun, 2 Jul 2023 12:28:36 -0400 Subject: [PATCH] artificially inflate the number of transactions --- .../desktop-client/src/components/accounts/Account.js | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/desktop-client/src/components/accounts/Account.js b/packages/desktop-client/src/components/accounts/Account.js index 998825bf..b995a1f8 100644 --- a/packages/desktop-client/src/components/accounts/Account.js +++ b/packages/desktop-client/src/components/accounts/Account.js @@ -1242,7 +1242,15 @@ class AccountInternal extends PureComponent { this.setState( { - transactions: data, + // artificially inflate the number of transactions + transactions: Array(100) + .fill(data) + .flatMap((ts, i) => + ts.map(t => ({ + ...t, + id: `${t.id}-${i}`, + })), + ), transactionCount: this.paged.getTotalCount(), transactionsFiltered: isFiltered, loading: false, -- 2.38.1 ```
Author
Owner

@j-f1 commented on GitHub (Jul 2, 2023):

Alternatively, if you are able to reproduce it, I would appreciate if you could run a git bisect and follow the steps to track down exactly which commit introduced the issue. (Make sure you re-run yarn install at each step to make sure you have the right dependencies installed).

<!-- gh-comment-id:1616722441 --> @j-f1 commented on GitHub (Jul 2, 2023): Alternatively, if you *are* able to reproduce it, I would appreciate if you could run a [`git bisect`](https://stackoverflow.com/q/4713088/5244995) and follow the steps to track down exactly which commit introduced the issue. (Make sure you re-run `yarn install` at each step to make sure you have the right dependencies installed).
Author
Owner

@j-f1 commented on GitHub (Jul 2, 2023):

@joel-jeremy can you try out #1260 and see if it fixes the scrolling for you too?

<!-- gh-comment-id:1616804445 --> @j-f1 commented on GitHub (Jul 2, 2023): @joel-jeremy can you try out #1260 and see if it fixes the scrolling for you too?
Author
Owner

@joel-jeremy commented on GitHub (Jul 2, 2023):

I'm still seeing the same behavior.

https://github.com/actualbudget/actual/assets/20313680/763d8057-a0af-482b-ba65-7c98ee7e578b

<!-- gh-comment-id:1616819384 --> @joel-jeremy commented on GitHub (Jul 2, 2023): I'm still seeing the same behavior. https://github.com/actualbudget/actual/assets/20313680/763d8057-a0af-482b-ba65-7c98ee7e578b
Author
Owner

@j-f1 commented on GitHub (Jul 2, 2023):

Ok, I can reproduce that issue now with a very tall and narrow window size. It seems unrelated to the fix in #1260.

<!-- gh-comment-id:1616830720 --> @j-f1 commented on GitHub (Jul 2, 2023): Ok, I can reproduce that issue now with a very tall and narrow window size. It seems unrelated to the fix in #1260.
Author
Owner

@j-f1 commented on GitHub (Jul 2, 2023):

Does #1262 work for you?

<!-- gh-comment-id:1616859778 --> @j-f1 commented on GitHub (Jul 2, 2023): Does #1262 work for you?
Author
Owner

@joel-jeremy commented on GitHub (Jul 2, 2023):

Nice! That fixed the height of the table. Scrolling is still a bit jittery especially when scrolling fast but UX is better than before with the table height fix.

https://github.com/actualbudget/actual/assets/20313680/dd1cdee0-8f4a-42f0-aa87-f1e85bfcd05c

<!-- gh-comment-id:1616890548 --> @joel-jeremy commented on GitHub (Jul 2, 2023): Nice! That fixed the height of the table. Scrolling is still a bit jittery especially when scrolling fast but UX is better than before with the table height fix. https://github.com/actualbudget/actual/assets/20313680/dd1cdee0-8f4a-42f0-aa87-f1e85bfcd05c
Author
Owner

@j-f1 commented on GitHub (Jul 2, 2023):

Alright! I think any remaining jank would be due to your phone not being able to render new rows fast enough.

<!-- gh-comment-id:1616894565 --> @j-f1 commented on GitHub (Jul 2, 2023): Alright! I think any remaining jank would be due to your phone not being able to render new rows fast enough.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/actual#7405