[Feature] Implement optimization and load-on-scroll for posts

[AmanatAliPanhwer]

🌟 Summary

Optimize application performance and improve user experience by implementing lazy loading (load-on-scroll) for blog posts on the homepage and other listing pages.

🧩 Problem or Motivation

As the number of blog posts grows, loading all posts at once on the homepage can lead to slower page load times and a degraded user experience. Implementing load-on-scroll will fetch posts only when they are needed, improving initial load performance and perceived speed.

🧰 Proposed Solution

• Backend (Flask):
  • Modify the post retrieval logic to support pagination (e.g., using LIMIT and OFFSET in SQL queries).
  • Create an API endpoint (or modify existing one) that returns a paginated list of posts.
• Frontend (JavaScript/Jinja2):
  • Implement JavaScript to detect when the user scrolls near the bottom of the page.
  • When the scroll threshold is met, make an AJAX request to the paginated API endpoint to fetch more posts.
  • Dynamically append the new posts to the existing list on the page.
  • Display a loading indicator while new posts are being fetched.
  • Handle the end of available posts gracefully (e.g., display a "No more posts" message).

📦 Technical Considerations

• Frontend changes (HTML/JS/CSS)
• Backend changes (Flask, Supabase)
• Database changes (pagination queries)
• Authentication/Authorization
• UI/UX improvements

🧠 Alternatives

Could implement traditional pagination with "next/previous" buttons, but load-on-scroll offers a smoother, more modern user experience.

🧾 Additional Context

This feature is crucial for scalability and maintaining a good user experience as the blog grows.