Implement Message Pagination

[SudiptaPaul-31]

📜 Feature: Implement Message Pagination

📖 Description

Enable message pagination so users can seamlessly load older messages when scrolling up in the chat window. This improves usability for long conversations and ensures efficient data handling.

Expected Behavior

• Scroll-to-load: Older messages should load automatically when the user scrolls to the top of the chat.
• Smooth experience: Pagination should not cause layout jumps or break responsive design.
• Consistent ordering: Messages should remain in chronological order after loading.
• Loading indicator: Show a subtle spinner or placeholder while older messages are being fetched.

🛠 Technical Notes

• Implement pagination logic at the data-fetching layer (e.g., API or SDK).
• Consider using cursor‑based pagination for scalability.
• Ensure compatibility with existing features (real-time rendering, typing indicator, rate limiting).
• Optimize for performance to avoid excessive re-renders.
• Maintain dark/minimal UI styling.

✅ Verification

• Scrolling up triggers loading of older messages.
• Messages remain in correct chronological order.
• Loading indicator appears and disappears correctly.
• Works consistently across browsers and devices.
• npm run lint and npm run build succeed.
• No regression in wallet, navigation, or chat features.

[drips-wave]

This issue has been added to the Stellar Wave Program and is worth 200 Points.

🧑‍💻 Interested in contributing? Apply to work on this issue on Drips Wave, earn points, and receive rewards.

Warning

Only applications submitted via the apply link above will be considered. Please do not apply by commenting on the issue or opening a PR directly.

🤠 Repo maintainers: You can manage this issue's Points and Complexity on your Maintainer Dashboard here. Please keep an eye on applications and respond quickly 💙

ℹ️ Learn more about Drips Wave

[mikevill20]

@mikevill20 has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

Hello maintainer, i will like to work on this issue. please assign it to me.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @mikevill20 to this issue.

[Chucks1093]

@Chucks1093 has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

I have read through this issue and can start implementing this feature in AnonChat immediately. This is a basic feature in most apps I have built in the past and wouldn't take me much time to implement

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Chucks1093 to this issue.

[Uchechukwu-Ekezie]

@Uchechukwu-Ekezie has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

please can you assign this to me i have done a lot of page and message pagination

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Uchechukwu-Ekezie to this issue.

[drips-wave]

Congratulations, @mikevill20! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on February 26, 2026.

🧑‍💻 @mikevill20: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are issued when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊