Refactor: remove react-flip-move (#1223)

frontend/package.json

@@ -70,7 +70,6 @@
     "react-countdown": "^2.3.2",
     "react-country-flag": "^3.0.2",
     "react-dom": "^18.2.0",
-    "react-flip-move": "^3.0.3",
     "react-hot-toast": "^2.2.0",
     "react-i18next": "^12.2.2",
     "react-image": "^4.0.3",

frontend/src/components/accounts/Accounts.tsx

@@ -2,7 +2,6 @@ import * as React from "react";
 
 import { id } from "@/common/utils/utils";
 import { AccountRow } from "@/frontend/components/accounts/AccountRow";
-import { FlipMove } from "@/frontend/components/utils/FlipMove";
 import { ListHandler } from "@/frontend/components/utils/ListHandler";
 import { trpc } from "@/frontend/libraries/trpc";
 
@@ -23,13 +22,11 @@ export const Accounts: React.FC = React.memo(() => {
   );
   return (
     <ListHandler<"account.listByTimestamp"> query={query} parser={id}>
-      {(items) => (
-        <FlipMove duration={1000} staggerDurationBy={0}>
-          {items.map((account) => (
-            <AccountRow key={account.id} account={account} />
-          ))}
-        </FlipMove>
-      )}
+      {(items) =>
+        items.map((account) => (
+          <AccountRow key={account.id} account={account} />
+        ))
+      }
     </ListHandler>
   );
 });

frontend/src/components/blocks/Blocks.tsx

@@ -4,7 +4,6 @@ import { useTranslation } from "next-i18next";
 
 import { id } from "@/common/utils/utils";
 import { BlocksRow } from "@/frontend/components/blocks/BlocksRow";
-import { FlipMove } from "@/frontend/components/utils/FlipMove";
 import { ListHandler } from "@/frontend/components/utils/ListHandler";
 import { Placeholder } from "@/frontend/components/utils/Placeholder";
 import { subscriptions } from "@/frontend/hooks/use-subscription";
@@ -44,13 +43,9 @@ export const Blocks: React.FC = React.memo(() => {
               : null}
             {t("utils.Update.refresh")}
           </Placeholder>
-          <FlipMove duration={1000} staggerDurationBy={0}>
-            {items.map((block) => (
-              <div key={block.hash}>
-                <BlocksRow block={block} />
-              </div>
-            ))}
-          </FlipMove>
+          {items.map((block) => (
+            <BlocksRow key={block.hash} block={block} />
+          ))}
         </>
       )}
     </ListHandler>

frontend/src/components/transactions/Transactions.tsx

@@ -6,7 +6,6 @@ import { useTranslation } from "next-i18next";
 import { TransactionListResponse } from "@/common/types/procedures";
 import { TRPCInfiniteQueryResult } from "@/common/types/trpc";
 import { TransactionAction } from "@/frontend/components/transactions/TransactionAction";
-import { FlipMove } from "@/frontend/components/utils/FlipMove";
 import { ListHandler } from "@/frontend/components/utils/ListHandler";
 import { Placeholder } from "@/frontend/components/utils/Placeholder";
 
@@ -45,15 +44,13 @@ export const Transactions: React.FC<Props> = React.memo(({ query }) => {
             </Placeholder>
           );
         }
-        return (
-          <FlipMove duration={1000} staggerDurationBy={0}>
-            {items.map((transaction) => (
-              <div key={transaction.hash} data-testid="transaction-item">
-                <TransactionAction transaction={transaction} />
-              </div>
-            ))}
-          </FlipMove>
-        );
+        return items.map((transaction) => (
+          <TransactionAction
+            transaction={transaction}
+            key={transaction.hash}
+            data-testid="transaction-item"
+          />
+        ));
       }}
     </ListHandler>
   );

frontend/tests/pages/transactions.spec.ts

@@ -16,7 +16,7 @@ test.describe("Transactions page", () => {
   test(`There are ${transactionsPerPage} transaction rows on load`, async ({
     page,
   }) => {
-    await expect(page.getByTestId("transaction-item")).toHaveCount(
+    await expect(page.locator("class=ActionRow")).toHaveCount(
       transactionsPerPage
     );
   });