Skip to content

[Bug] MobileCourseViewer eagerly fetches all lesson metadata on mount — 10+ API calls before user scrolls #625

Description

@RUKAYAT-CODER

Overview

src/components/mobile/MobileCourseViewer.tsx (943 lines) fires individual API calls for each lesson in the course on component mount to fetch lesson metadata (titles, durations, completion status). For a course with 15 lessons, this triggers 15 simultaneous API calls on mount. On slow connections, these compete with the primary course data request and delay time-to-interactive.

Specifications

Features:

  • Lesson metadata included in the primary GET /api/courses/:id response (embedded via API query param)
  • Fallback: only visible lessons (first 3) fetched eagerly; remaining fetched on scroll
  • Zero individual lesson API calls on course mount for normally-functioning API

Tasks:

  • Update course API client to request ?include=lessons query param
  • Update MobileCourseViewer to consume embedded lesson data from course response
  • Add scroll-triggered lazy load for lessons not included in initial response
  • Remove per-lesson useEffect fetch calls from mount
  • Add unit test confirming 1 API call on mount (not 1 + N)

Impacted Files:

  • src/components/mobile/MobileCourseViewer.tsx
  • src/services/api/courseApi.ts

Acceptance Criteria

  • Single API call on course viewer mount (for API that supports embedded lessons)
  • First 3 lessons display without additional network requests
  • Additional lessons load as user scrolls
  • Unit test confirms single API call mock invocation on mount

Metadata

Metadata

Assignees

No one assigned

    Labels

    Stellar WaveIssues in the Stellar wave programbugSomething isn't workingperformancePerformance issue or optimization

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions