Improve expenses mobile layout and payment flow

apps/frontend/src/lib/queries.ts

@@ -1,4 +1,4 @@
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { keepPreviousData, useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import {
   getQuotes, fetchQuotes, getQuoteHistory, getDailyMinMax, getDailyQuotes,
   getPeriodicExpenses, createPeriodicExpense as createPeriodicExpenseApi,
@@ -135,6 +135,7 @@ export function useGenerateMonthlyExpense() {
 export function useExpenses(status: string, page: number = 1, pageSize: number = 10, periodicExpenseId?: number, search?: string) {
   return useQuery({
     queryKey: expenseKeys.byFilters(status, page, pageSize, periodicExpenseId, search),
+    placeholderData: keepPreviousData,
     queryFn: () => getExpenses(
       status === "all" ? undefined : status,
       page,