Adds Progressive Rendering for Transaction DataTable

- it fixes UI freezing when trying to change page, allows to interupt DataTable loading
There is still issue when DataTable loaded (after preloader starts to fade), if user tries to change page in this time he will encounter UI freezing up to 100-150ms D:
Fix for that is Chunk Rendering or Virtualization, but it is a overkill?

Author: Yurii-IvoryFace

src/pages/trading_analytics/Tabs/Transaction/index.tsx

@@ -1,6 +1,6 @@
 import { Box, Grid, Group, NumberFormatter, Paper, Table, Text, Title } from "@mantine/core";
 import { useLocalStorage } from "@mantine/hooks";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useTransition } from "react";
 import { TauriTypes } from "$types";
 import { useQueries } from "./queries";
 import { useTauriEvent } from "@hooks/useTauriEvent.hook";
@@ -58,6 +58,10 @@ export const TransactionPanel = ({ isActive }: TransactionPanelProps = {}) => {
   const [filterOpened, setFilterOpened] = useState<boolean>(false);
   const [canExport, setCanExport] = useState<boolean>(false);
 
+  // Progressive rendering === allows navigation during table render (without it ui freezes until table loads)
+  const [isPending, startTransition] = useTransition();
+  const [displayedRecords, setDisplayedRecords] = useState<TauriTypes.TransactionDto[]>([]);
+
   // Check permissions for export on mount
   useEffect(() => {
     HasPermission(TauriTypes.PermissionsFlags.EXPORT_DATA).then((res) => setCanExport(res));
@@ -94,6 +98,17 @@ export const TransactionPanel = ({ isActive }: TransactionPanelProps = {}) => {
   // Use the custom hook for Tauri events
   useTauriEvent(TauriTypes.Events.RefreshTransactions, handleRefresh, []);
 
+  // Progressive rendering 
+  useEffect(() => {
+    if (paginationQuery.isFetching) {
+      setDisplayedRecords([]);
+    } else if (paginationQuery.data?.results) {
+      startTransition(() => {
+        setDisplayedRecords(paginationQuery.data?.results || []);
+      });
+    }
+  }, [paginationQuery.isFetching, paginationQuery.data?.results]);
+
   return (
     <Box p={"md"}>
       {" "}
@@ -200,8 +215,8 @@ export const TransactionPanel = ({ isActive }: TransactionPanelProps = {}) => {
             className={`${classes.databaseTransactions} ${useHasAlert() ? classes.alert : ""} ${filterOpened ? classes.filterOpened : ""}`}
             mt={"md"}
             striped
-            fetching={paginationQuery.isFetching || calculateTaxMutation.isPending}
-            records={paginationQuery.isFetching ? [] : (paginationQuery.data?.results || [])}
+            fetching={paginationQuery.isFetching || isPending || calculateTaxMutation.isPending}
+            records={displayedRecords}
             page={getSafePage(queryData.page, paginationQuery.data?.total_pages)}
             onPageChange={(page) => setQueryData((prev) => ({ ...prev, page }))}
             totalRecords={paginationQuery.data?.total || 0}