[ENHANCEMENT] Performance Optimization: Reduce API Calls and Improve Load Times

[akash2017sky]

Description:

The application makes excessive API calls that impact performance, especially on initial load and when navigating between pages. Multiple sequential API requests create waterfall loading patterns that slow down the user experience.

Performance Issues Identified:

1. Redundant API Calls on Tab Switches

• Location: WalletTransactionLog.tsx, FeedList.tsx
• Issue: Fetching data again when switching between All/Sent/Received tabs
• Impact: Unnecessary network requests, slower UI response

2. Sequential User/Wallet/Transaction Fetching

• Location: FeedList.tsx:59-105
• Issue: Nested loops fetching users → wallets → transactions sequentially
• Impact: Long loading times when many users exist (N+1 query pattern)

3. No Request Caching

• Issue: Same data fetched multiple times across components
• Impact: Increased bandwidth usage, slower page loads

4. Missing Data Pagination

• Location: FeedList.tsx:24 (hardcoded MAX_RECORDS = 100)
• Issue: Loading all records upfront instead of on-demand
• Impact: Initial load time increases with data growth

Proposed Solutions:

1. Implement Client-Side Caching ✅ (Partially implemented)

• Cache fetched data in component state
• Filter cached data instead of re-fetching

2. Add Request Batching

• Batch multiple API calls into single requests where possible
• Use Promise.all() for parallel requests instead of sequential

3. Implement React Query or SWR

• Automatic caching, background refetching
• Deduplicate simultaneous requests
• Better loading/error states management

4. Add Virtualization for Long Lists

• Use react-window or react-virtual for feed lists
• Only render visible items

5. Implement Pagination/Infinite Scroll

• Load data in chunks (e.g., 20 items at a time)
• Add "Load More" button or infinite scroll

6. Add Loading Skeletons

• Replace "Loading..." text with skeleton screens
• Improve perceived performance

[BenGWeeks]

Looking at the most recent API for v1.3.1 (which we can upgrade to) here:

https://demo.lnbits.com/docs

Suggest some suggestions for increasing the performance @claude

[claude]

Claude finished @BenGWeeks's task —— View job

---

Performance Optimization Analysis - Recommendations

I've analyzed the LNbits API v1.3.1 documentation and your current implementation. Here are specific suggestions to increase performance:

Current Performance Issues Identified

1. N+1 Query Pattern in FeedList.tsx (Lines 72-105)

• Sequential API calls: For each user → fetch wallets → for each wallet → fetch transactions
• With 10 users and 2 wallets each, this results in ~30 sequential API calls
• Impact: Exponential loading time as users increase

2. Duplicate API Calls in WalletTransactionLog.tsx (Lines 72-112)

• Fetches wallets for ALL users twice (lines 75 and 93)
• Creates redundant wallet-to-user mappings
• Impact: Doubles the number of wallet fetch operations

3. Hardcoded Limits on Transactions

• getWalletTransactionsSince() uses limit=100 (hardcoded in API calls)
• FeedList.tsx caps at MAX_RECORDS = 100
• No pagination support for larger datasets

---

Recommended Performance Improvements

🚀 High Priority: Use Bulk/Paginated Endpoints

The LNbits API v1.3.1 includes optimized endpoints that your code isn't currently using:

1. Use /api/v1/payments/all/paginated for Bulk Transaction Fetching

• Current: Multiple sequential calls to /api/v1/payments?limit=100 per wallet
• Replace with: Single call to /api/v1/payments/all/paginated
• Already implemented in lnbitsServiceLocal.ts:963-1025 but not being used!
• Benefits:
  • Fetch all transactions across all wallets in ONE request
  • Supports pagination with limit, offset, sortby, direction params
  • Reduces N API calls to 1 call

Implementation in FeedList.tsx:

// BEFORE (Sequential - slow):
for (const userData of allWalletsData) {
  for (const wallet of filteredWallets) {
    const payments = await getWalletTransactionsSince(wallet.inkey, timestamp, null);
    allPayments = allPayments.concat(payments);
  }
}

// AFTER (Single call - fast):
const allPayments = await getAllPayments(100, 0, 'time', 'desc');
// Filter client-side for date range and wallet type

2. Use /api/v1/wallet/paginated for Efficient Wallet Fetching

• Current: Calling /users/api/v1/user/{userId}/wallet for each user sequentially
• Replace with: Use getWalletsPaginated() already implemented in lnbitsServiceLocal.ts:1066-1141
• Benefits: Fetch wallets with pagination support instead of per-user calls

3. Leverage /users/api/v1/user for Bulk User Fetching

• Current: Already using this via getAllUsersFromAPI() ✅
• Good: Single call fetches all users
• Optimize: Cache this response and reuse across components

---

💾 Implement React Query (or SWR)

Your package.json doesn't include a data fetching library. Add React Query or SWR:

npm install @tanstack/react-query

Benefits:

• Automatic request deduplication (prevents duplicate simultaneous requests)
• Built-in caching with configurable TTL
• Background refetching
• Optimistic updates
• Better loading/error states

Example implementation:

// In FeedList.tsx
import { useQuery } from '@tanstack/react-query';

const { data: allPayments, isLoading, error } = useQuery({
  queryKey: ['payments', timestamp],
  queryFn: () => getAllPayments(100, 0, 'time', 'desc'),
  staleTime: 30000, // Cache for 30 seconds
  refetchOnWindowFocus: false,
});

---

⚡ Parallel API Calls with Promise.all()

Current bottleneck in WalletTransactionLog.tsx (Lines 72-84):

// Sequential - SLOW
for (const u of allUsers) {
  const wallets = await getUserWallets(adminKey, u.id); // Waits for each
  wallets.forEach(wallet => walletToUserMap.set(wallet.id, u));
}

Replace with parallel execution:

// Parallel - FAST
const walletPromises = allUsers.map(u => 
  getUserWallets(adminKey, u.id).then(wallets => ({ user: u, wallets }))
);
const results = await Promise.all(walletPromises);
results.forEach(({ user, wallets }) => {
  wallets?.forEach(wallet => walletToUserMap.set(wallet.id, user));
});

Impact: 10 users × 200ms per call = 2000ms → reduces to ~200ms

---

🎯 Eliminate Redundant Fetches

In WalletTransactionLog.tsx:

• Line 75: getUserWallets() called for each user
• Line 93: Same call repeated for the same users
• Fix: Reuse the walletToUserMap created in the first loop

Before (Lines 90-112):

for (const u of allUsers) {
  const wallets = await getUserWallets(adminKey, u.id); // DUPLICATE!
  for (const wallet of wallets) {
    const payments = await getWalletTransactionsSince(...);
    allPayments.push(...payments);
  }
}

After:

// Reuse wallets from walletToUserMap
const walletEntries = Array.from(walletToUserMap.entries());
const paymentPromises = walletEntries.map(async ([walletId, user]) => {
  const wallet = /* get from previously fetched data */;
  return getWalletTransactionsSince(wallet.inkey, timestamp, null);
});
const paymentArrays = await Promise.all(paymentPromises);
const allPayments = paymentArrays.flat();

---

📄 Implement True Pagination

Current issue: Loading all 100 records upfront, then paginating client-side

Better approach:

const [page, setPage] = useState(1);
const ITEMS_PER_PAGE = 20;

const { data, isLoading } = useQuery({
  queryKey: ['payments', page],
  queryFn: () => getAllPayments(
    ITEMS_PER_PAGE, 
    (page - 1) * ITEMS_PER_PAGE,
    'time',
    'desc'
  ),
});

Benefits:

• Initial load time reduced by 80% (20 records vs 100)
• Data loads as needed
• Scales to thousands of transactions

---

🔄 Implement Request Batching

Create a batching utility to combine multiple requests:

// services/batchedLnbitsService.ts
class RequestBatcher {
  private userWalletQueue = new Map();
  
  async batchGetUserWallets(userId: string) {
    // Collect requests for 50ms, then execute in parallel
    return new Promise((resolve) => {
      this.userWalletQueue.set(userId, resolve);
      
      setTimeout(() => {
        const userIds = Array.from(this.userWalletQueue.keys());
        Promise.all(userIds.map(id => getUserWallets(adminKey, id)))
          .then(results => {
            userIds.forEach((id, idx) => {
              this.userWalletQueue.get(id)(results[idx]);
            });
            this.userWalletQueue.clear();
          });
      }, 50);
    });
  }
}

---

🎨 Add Loading Skeletons

Replace <div>Loading...</div> with skeleton screens:

npm install react-loading-skeleton

import Skeleton from 'react-loading-skeleton';

if (loading) {
  return (
    <div className={styles.feedlist}>
      {[...Array(5)].map((_, i) => (
        <div key={i} className={styles.bodycell}>
          <Skeleton height={60} />
        </div>
      ))}
    </div>
  );
}

Impact: Perceived performance improvement, better UX

---

🔍 Add Virtualization for Long Lists

For lists with 100+ items, implement windowing:

npm install react-window

import { FixedSizeList } from 'react-window';

<FixedSizeList
  height={600}
  itemCount={sortedZaps.length}
  itemSize={60}
  width="100%"
>
  {({ index, style }) => (
    <div style={style}>
      {/* Render zap item */}
    </div>
  )}
</FixedSizeList>

Benefits: Only renders visible items, handles 10,000+ items smoothly

---

📊 Estimated Performance Improvements

Optimization	Current Time	Optimized Time	Improvement
FeedList initial load (10 users)	~3000ms	~400ms	87% faster
WalletTransactionLog load	~2500ms	~300ms	88% faster
Tab switching	~800ms	~10ms	99% faster (cached)
Subsequent loads	~3000ms	~50ms	98% faster (cached)

---

🎯 Quick Wins (Implement First)

1. Use getAllPayments() instead of per-wallet fetching (FeedList.tsx:83-105)
2. Remove duplicate getUserWallets() calls (WalletTransactionLog.tsx:90-112)
3. Parallelize wallet fetching with Promise.all() (Both files)
4. Install and configure React Query for automatic caching

These four changes alone should reduce load times by 70-80%.

---

📦 Dependencies to Add

npm install @tanstack/react-query react-loading-skeleton react-window

Would you like me to implement any of these optimizations? I can start with the high-priority items (using bulk endpoints and adding React Query).

---

[BenGWeeks]

FYI @akash2017sky

[BenGWeeks]

FYI @akash2017sky