Story

As a user, I want to see a loading indicator in Pipelines Overview page so I know the dashboard is actively fetching data.
Each card component in the page needs to have a separate loading spinner when it's respective data is being fetched from API

Background

In current view the User doesn't have a clear indication if the __ data is loaded in the charts of the pipeline overview tab and this leads to confusion as the page is blank.

Out of scope

• Backend API changes
• UX modifications for the spinner

Approach (Required)

• Display a loading spinner in each of the card component when the API data is being fetched.
• Hide the loading spinner and display the actual data/chart for each component once the data is fetched via API.

Dependencies

None

Acceptance Criteria

• Loading Spinner is displayed in Pipelines Overview page.
• Each card component in the page displays a separate loading spinner when it's respective data is being fetched from API.
• Loading spinner is hidden and respective data/chart is displayed after data is loaded.

INVEST Checklist

• Dependencies identified

• Story implementable

• AC agreed upon

• No blockers

• Story estimated

Done Checklist

• Code updated, reviewed, documented, and checked in
• Unit and integration tests added and passing in CI
• All acceptance criteria met