Polish mobile and web experience

apps/mobile/app/(app)/more/expenses/index.tsx

@@ -2,7 +2,6 @@ import { Ionicons } from "@expo/vector-icons";
 import { router } from "expo-router";
 import { useMemo, useState } from "react";
 import {
-  RefreshControl,
   ScrollView,
   StyleSheet,
   Text,
@@ -15,6 +14,7 @@ import { AppBackground } from "@/components/AppBackground";
 import { FilterChip } from "@/components/FilterChip";
 import { LoadingScreen } from "@/components/LoadingScreen";
 import { PageHeader } from "@/components/PageHeader";
+import { PullToRefresh } from "@/components/PullToRefresh";
 import { SwipeableRow } from "@/components/SwipeableRow";
 import { TabPage } from "@/components/TabPage";
 import { TabScrollView } from "@/components/TabScrollView";
@@ -110,9 +110,8 @@ export default function ExpensesScreen() {
             </View>
           }
           refreshControl={
-            <RefreshControl
-              refreshing={expensesQuery.isRefetching}
-              onRefresh={() => void expensesQuery.refetch()}
+            <PullToRefresh
+              onRefresh={() => expensesQuery.refetch()}
               tintColor={colors.primary}
             />
           }