Update loading more transactions

src/features/wallet/components/wallet-transactions.tsx

@@ -1,8 +1,8 @@
-import moreIcon from '@tabler/icons/outline/dots-circle-horizontal.svg';
+import { useEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import Button from 'soapbox/components/ui/button.tsx';
 import { Column } from 'soapbox/components/ui/column.tsx';
+import Spinner from 'soapbox/components/ui/spinner.tsx';
 import Transactions from 'soapbox/features/wallet/components/transactions.tsx';
 import { useTransactions } from 'soapbox/features/zap/hooks/useHooks.ts';
 
@@ -15,17 +15,35 @@ const messages = defineMessages({
 const WalletTransactions = () => {
   const intl = useIntl();
   const { isLoading, expandTransactions } = useTransactions();
+  const observerRef = useRef<HTMLDivElement | null>(null);
+  const [showSpinner, setShowSpinner] = useState(false);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setShowSpinner(true);
+          if (!isLoading) expandTransactions();
+        }
+      },
+      { rootMargin: '100px' },
+    );
+
+    if (observerRef.current) {
+      observer.observe(observerRef.current);
+    }
+
+    return () => observer.disconnect();
+  }, [expandTransactions, isLoading]);
 
   return (
-    <Column label={intl.formatMessage(messages.title)} >
+    <Column label={intl.formatMessage(messages.title)}>
       <Transactions />
-      <div className='flex w-full justify-center'>
+      <div className='flex w-full justify-center' ref={observerRef}>
-        <Button icon={isLoading ? undefined : moreIcon} theme='primary' onClick={expandTransactions}>
+        {showSpinner && isLoading && <Spinner />}
-          {isLoading ? intl.formatMessage(messages.loading) : intl.formatMessage(messages.more)}
-        </Button>
       </div>
     </Column>
   );
 };
 
-export default WalletTransactions;
+export default WalletTransactions;