Implement pagination for recommended resources

[akolson]

Overview

This task involves implementing pagination to show more recommendations. Pagination is based on whether recommendations are above (good) or below (not so good) the relevance threshold. Other tasks include implementing loading and errors states, and API interaction. API interaction is based on data from the public API for now, as the recommendations backend is still in development.

Description and outcomes

• Design requirements

  • A maximum of 10 recommendations are loaded at a time (See Figma designs).

  • If 10 resources are recommended on initial load;

    • Display the View more link that loads more resources.
      • If < 10 resources are recommended on click View more,
        • Display the Show other resources anyway link that loads resources below the relevance threshold.
        • Hide the Show other resources anyway link when there are no more resources below the relevance threshold.
      • Else display the View more link again that loads more resources.

  • If < 10 resources are recommended on initial load;

    • Display the Show other resources anyway link that loads resources below the relevance threshold.
    • Hide the Show other resources anyway link when there are no more resources below the relevance threshold.

  • if 0 resources are recommended on initial load;

    • Display the Show other recommendations link that loads resources below the relevance threshold.
    • Hide the Show other recommendations link when there are no more resources below the relevance threshold.

  • When loading recommendations initially, an indeterminate spinner is displayed.
    

  • Clicking View more, Show other resources anyway, Try again, or Show other recommendations links displays an indeterminate spinner below the current recommendations.
    

  • When an error is encountered, an appropriate message and a Try again link, that reloads the failed recommendations, is displayed.
    

  • The spinner is dismissed once loading of recommendations is completed or an error occurs.

  • The spinner should always be after the last recommendation (if any).

• Markup requirements

  • NA

• Styling requirements

  • See Figma designs for styling requirements.

• Architectural requirements

  • Implement a mock backend that uses data from the public API.
    • Use Mock Service Worker, a client agnostic library, to mock the recommendations request.
    • The endpoint is /mock/recommendations?overrideThreshold=true.
    • overrideThreshold is an optional query parameter that allows recommendations that may not be useful to be returned to the user. It is a boolean, with a default value of false.
  • The mock backend should interact with the UI to provide pagination behavior, and loading and error states as described in the Figma designs.

Acceptance Criteria

• Clicking the View more, Show other resources anyway, and Show other recommendations links display the intended pagination, and loading behavior.
• Pagination support text is displayed as specified in the Figma designs.
• A Try again link is displayed in the event of an error while loading recommendations
• Appropriate text is displayed incase of errors during loading as specified in the Figma designs.
• Tests are written to verify correctness of page.

Assumptions and Dependencies

• The mock backend (See Architectural requirements);

  • Uses data from the public API.
  • Has an overrideThreshold query parameter to return recommendations that may not be useful to a user.

• Is blocked by;

  • Update Import from other channels page to display recommendations #4565

Scope

The scope of this task is limited to;

• Implementing the pagination behavior, and loading and error states of recommended resources as specified in the Figma designs.
• Implementing a mock backend that uses data from the public API

Accessibility Requirements

NA

Resources

• Figma designs
• Mock Service Worker