⚡ Optimize Aptitude Question Loading with Lazy Fetching & Smart Caching

[kumar-veerendra]

Summary

Improve the performance of the Aptitude Practice module by loading questions on demand instead of fetching all questions during the initial page load.

Current Behavior

• All aptitude questions are fetched when the user opens a practice set.
• Large API responses increase loading time.
• Users must wait even though they only view one question at a time.

Proposed Solution

1. Lazy Loading

• Fetch only the first question during the initial page load.
• Fetch subsequent questions only when the user navigates to them.

2. Client-side Caching

• Cache fetched questions in memory using TanStack Query (React Query).
• Avoid duplicate API requests during the same session.

3. Persistent Cache

• Store question data in localStorage or IndexedDB with a cache expiration (TTL).
• Reuse cached data on future visits to reduce loading time.

4. Background Prefetching

• While the user is solving the current question, prefetch the next question in the background.
• This provides nearly instant navigation between questions.

5. Cache Invalidation

• Automatically invalidate cached questions when question content is updated.
• Use a version number or timestamp to ensure users always receive the latest data.

Benefits

• Faster initial page load
• Smaller API payloads
• Reduced backend/database load
• Better user experience
• Improved scalability
• Lower bandwidth usage

Acceptance Criteria

• Initial page loads only the first question.
• Questions are fetched only when needed.
• Previously opened questions load instantly.
• Next question is prefetched in the background.
• Cached questions expire automatically after the configured TTL.
• Updated questions invalidate old cache.