[Feature] Add Pagination and Lazy Loading for Analysis History Page

[Pcmhacker-piro]

Description

The analysis history page (dashboard.html or history.html) loads all past analyses for a user in a single query with no pagination or lazy loading. As users accumulate analyses over time, this causes:

1. Long page load times for users with 50+ analyses
2. Excessive memory usage rendering hundreds of rows simultaneously
3. No way to quickly navigate to older analyses without scrolling endlessly
4. Unnecessary database load fetching all records at once

Steps to Reproduce

1. Login as a user who has completed 20+ crop analyses
2. Navigate to the Dashboard or History page
3. Observe that all analyses are rendered in a single list with no page numbers or "Load More" button
4. Page load time increases proportionally with the number of analyses

Expected Behavior

• Backend: Update the analysis history query to accept page and per_page query parameters
• Backend: Return total count and total pages alongside the paginated results
• Frontend: Add pagination controls (Previous/Next, page numbers) below the analysis list
• Frontend (alternative): Implement an "infinite scroll" / "Load More" button that fetches the next page via AJAX
• Default: Show 10 items per page

Implementation Hints

Backend — Update the route in app.py:

from flask import request

@app.route("/dashboard")
@login_required
def dashboard():
    page = request.args.get("page", 1, type=int)
    per_page = request.args.get("per_page", 10, type=int)
    pagination = Analysis.query.filter_by(user_id=current_user.id)\
        .order_by(Analysis.created_at.desc())\
        .paginate(page=page, per_page=per_page, error_out=False)
    return render_template(
        "dashboard.html",
        analyses=pagination.items,
        pagination=pagination
    )

Frontend — Add pagination to the template:

<!-- Pagination controls -->
<div class="flex justify-center items-center gap-2 mt-6">
  {% if pagination.has_prev %}
    <a href="?page={{ pagination.prev_num }}" class="px-3 py-2 rounded-lg bg-indigo-600 text-white">Previous</a>
  {% endif %}
  {% for page_num in pagination.iter_pages() %}
    {% if page_num %}
      <a href="?page={{ page_num }}" class="px-3 py-2 rounded-lg {% if page_num == pagination.page %}bg-indigo-600 text-white{% else %}bg-slate-100{% endif %}">{{ page_num }}</a>
    {% endif %}
  {% endfor %}
  {% if pagination.has_next %}
    <a href="?page={{ pagination.next_num }}" class="px-3 py-2 rounded-lg bg-indigo-600 text-white">Next</a>
  {% endif %}
</div>

Affected Files

• app.py (update dashboard/history route with pagination)
• templates/dashboard.html (add pagination controls)
• templates/history.html (add pagination controls)
• static/css/style.css (pagination styling)

Labels

type:feature, level:beginner, type:performance

[Pcmhacker-piro]

Hi @neeru24,

I'd like to contribute to this project by working on this issue. I have experience contributing to open-source projects and would be glad to take ownership of the required implementation.

Kindly assign this issue to me if it's available. Thank you!

[itsmitalijadhav06-beep]

Hi @neeru24 , I would like to work on this feature. I have reviewed the issue and would like to implement pagination and lazy loading for the analysis history page. Could you please assign this issue to me?

[Vijaykp12]

/assign

[Vijaykp12]

Hi @neeru24 , I would like to work on this feature. I have reviewed the issue and would like to resolve this issue myself