From 16e5ab9006b8c94285315dc148379cbdbbced9dc Mon Sep 17 00:00:00 2001
From: Lukas Jakob <lu.jakob@googlemail.com>
Date: Mon, 13 Mar 2023 14:55:26 -0600
Subject: [PATCH 1/2] feat(Transactions): add loading spinner

---
 src/app/screens/Transactions/index.tsx | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/app/screens/Transactions/index.tsx b/src/app/screens/Transactions/index.tsx
index 90d1a9e791..bb44864f5f 100644
--- a/src/app/screens/Transactions/index.tsx
+++ b/src/app/screens/Transactions/index.tsx
@@ -1,4 +1,5 @@
 import Container from "@components/Container";
+import Loading from "@components/Loading";
 import TransactionsTable from "@components/TransactionsTable";
 import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -15,6 +16,7 @@ function Transactions() {
 
   const { settings, getFormattedFiat } = useSettings();
   const [transactions, setTransactions] = useState<Transaction[]>([]);
+  const [transactionsLoading, setTransactionsLoading] = useState<boolean>(true);
 
   const fetchData = useCallback(async () => {
     try {
@@ -34,6 +36,8 @@ function Transactions() {
     } catch (e) {
       console.error(e);
       if (e instanceof Error) toast.error(`Error: ${e.message}`);
+    } finally {
+      setTransactionsLoading(false);
     }
   }, [settings, getFormattedFiat]);
 
@@ -51,11 +55,17 @@ function Transactions() {
         {t("description")}
       </p>
 
-      <div>
-        {transactions?.length > 0 && (
-          <TransactionsTable transactions={transactions} />
-        )}
-      </div>
+      {transactionsLoading ? (
+        <div className="flex justify-center mt-12">
+          <Loading />
+        </div>
+      ) : (
+        <div>
+          {transactions?.length > 0 && (
+            <TransactionsTable transactions={transactions} />
+          )}
+        </div>
+      )}
     </Container>
   );
 }

From 5c94bec4cb379523dd9dd07f94cf662f6ba8bb4b Mon Sep 17 00:00:00 2001
From: Lukas Jakob <lu.jakob@googlemail.com>
Date: Thu, 13 Apr 2023 06:41:22 -0500
Subject: [PATCH 2/2] refactor: transactions set loading in fetchData

---
 src/app/screens/Transactions/index.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/app/screens/Transactions/index.tsx b/src/app/screens/Transactions/index.tsx
index bb44864f5f..1e5a9edb66 100644
--- a/src/app/screens/Transactions/index.tsx
+++ b/src/app/screens/Transactions/index.tsx
@@ -16,9 +16,12 @@ function Transactions() {
 
   const { settings, getFormattedFiat } = useSettings();
   const [transactions, setTransactions] = useState<Transaction[]>([]);
-  const [transactionsLoading, setTransactionsLoading] = useState<boolean>(true);
+  const [transactionsLoading, setTransactionsLoading] =
+    useState<boolean>(false);
 
   const fetchData = useCallback(async () => {
+    setTransactionsLoading(true);
+
     try {
       // @Todo: add SWR caching? Check where to reset/mutate the cache?
       const { payments } = await api.getPayments();