🐛 (mobile) scrolling in lists with pull-to-refresh (actualbudget#1706)

packages/desktop-client/src/components/accounts/MobileAccountDetails.js

@@ -1,6 +1,5 @@
 import React, { useState, useMemo } from 'react';
 import { Link } from 'react-router-dom';
-import PullToRefresh from 'react-simple-pull-to-refresh';
 
 import { useActions } from '../../hooks/useActions';
 import Add from '../../icons/v1/Add';
@@ -12,6 +11,7 @@ import InputWithContent from '../common/InputWithContent';
 import Label from '../common/Label';
 import Text from '../common/Text';
 import View from '../common/View';
+import PullToRefresh from '../responsive/PullToRefresh';
 import CellValue from '../spreadsheet/CellValue';
 import { TransactionList } from '../transactions/MobileTransaction';
 

packages/desktop-client/src/components/accounts/MobileAccounts.js

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
-import PullToRefresh from 'react-simple-pull-to-refresh';
 
 import * as queries from 'loot-core/src/client/queries';
 
@@ -14,6 +13,7 @@ import Text from '../common/Text';
 import TextOneLine from '../common/TextOneLine';
 import View from '../common/View';
 import { Page } from '../Page';
+import PullToRefresh from '../responsive/PullToRefresh';
 import CellValue from '../spreadsheet/CellValue';
 
 function AccountHeader({ name, amount, style = {} }) {

packages/desktop-client/src/components/responsive/PullToRefresh.tsx

@@ -0,0 +1,28 @@
+import React, { type ComponentProps } from 'react';
+import BasePullToRefresh from 'react-simple-pull-to-refresh';
+
+import { css } from 'glamor';
+
+type PullToRefreshProps = ComponentProps<typeof BasePullToRefresh>;
+
+export default function PullToRefresh(props: PullToRefreshProps) {
+  return (
+    <div style={{ overflow: 'auto' }}>
+      <BasePullToRefresh
+        pullDownThreshold={80}
+        resistance={2}
+        className={String(
+          css({
+            '& .ptr__pull-down': {
+              textAlign: 'center',
+            },
+            '& .ptr__children': {
+              overflow: 'hidden auto',
+            },
+          }),
+        )}
+        {...props}
+      />
+    </div>
+  );
+}

upcoming-release-notes/1706.md

@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [MatissJanis]
+---
+
+Mobile: fix transaction list scrolling requiring a previous interaction before scroll happens