Create loader

web/src/pages/PrepareTransactionsPage/PrepareTransactionsPage.tsx

@@ -5,6 +5,7 @@ import { SkippedLines } from "./SkippedLines";
 import ImportBar from "./ImportBar";
 import type { ImportOptions } from "../../types/api";
 import { submitTransactions } from "../../services/api.service";
+import { useLoader } from "../../hooks/useLoader";
 
 
 export default function PrepareTransactionsPage() {
@@ -12,7 +13,7 @@ export default function PrepareTransactionsPage() {
   
   const desiredTransactions = useMemo(() => state.transactions.filter((_, i) => !state.filteredOut.includes(i)), [state, state.filteredOut]);
 
-  const handleSubmit = useCallback(async (opts: ImportOptions) => {
+  const { fn: handleSubmit, loading } = useLoader(async (opts: ImportOptions) => {
     if(!state.server) {
       return;
     }
@@ -63,7 +64,7 @@ export default function PrepareTransactionsPage() {
           </div>
 
           <div className="content">
-            <ImportBar onSubmit={handleSubmit} />
+            <ImportBar loading={loading} onSubmit={handleSubmit} />
           </div>
 
         </div>