Lazy load Groups Page data

[sailingsam]

Issue Description

The /groups page currently loads all groups at once, leading to potential performance issues as the number of groups increases in the future. This can cause the page to lag, affecting the overall user experience.

Expected Behavior

The /groups page should implement lazy loading, where only a subset of groups is loaded initially.
Additional groups should load dynamically as the user scrolls or interacts with the page, ensuring smooth performance.
The page should remain responsive and efficient, regardless of the total number of groups.

Current Behavior

All groups are loaded simultaneously, which may cause the page to lag, especially as more groups are added in the future.
This can lead to a poor user experience, with slower load times and decreased responsiveness.

Screenshots

NA

Reproducibility

• This issue is reproducible
• This issue is not reproducible

Steps to Reproduce

1.Visit the /groups page.
2.Observe the loading behavior and any lag when all groups are displayed at once.
3.Consider scenarios where the number of groups is significantly higher than the current count.

Severity/Priority

• Critical
• High
• Medium
• Low

Additional Information

Implementing lazy loading will improve the page's efficiency and ensure it can handle future scalability.
This enhancement will provide a better user experience by maintaining responsiveness as the number of groups increases.

Checklist

• I have read and followed the project's code of conduct.
• I have searched for similar issues before creating this one.
• I have provided all the necessary information to understand and reproduce the issue.
• I am willing to contribute to the resolution of this issue.

[DepayanMondal]

I want to work on this issue