Feature Loading Message

Open Beginner friendly
#22 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
65/100
Issue type
Feature
Clarity
Clearly specified
Activity status
Stale
Tech stack
javascript, react
Domain
frontend

Research direction

Start at the component and compare its data-fetching approach with the Pokemon app example. Test with https://cyf-react.glitch.me/delayed; done means a message inviting the user to wait remains visible until bookings render, then is hidden.

Written by the indexing model from the issue text.

Description

🏕 Priority Mandatory 🐂 Size Medium 📅 Week 4 🧩 Feature

Show a loading message

Instructions:

Show a loading state in <Bookings /> while the data from the server is being fetched. To test this, try loading data from https://cyf-react.glitch.me/delayed, which has a 5 second delay before returning the data. You will need to use another state to record when your application is loading data (this can be a boolean) and display a loading message whenever the application is loading data.

Hint: Try looking at your Pokemon app for an example.

Test:

  • A message inviting the user to wait should be displayed on the screen until bookings data can be rendered on the screen.
  • When bookings are rendered, the loading message should be hidden.
Dominant language
JavaScript
Stars
1
Forks
28
PR merge metrics
No merged PRs in 30d

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from CodeYourFuture/React-Module-Project

All issues in CodeYourFuture/React-Module-Project

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.