Issue #9 🎫: LikeButton (UI component) loading state

[ITurres]

Pull Request Summary for Issue #9 Completion

---

Overview:

• Issue [2pt] Loading state for LikeButton UI component #9.

Currently, there is no indicator that every project likes count is fetched from the server. This can be confusing to the user, as they may not know if the likes are being fetched or not. To fix this, a loading spinner will be added to the project's like button, replacing the Like icon until the request is successful or the error message is displayed. This will provide the user with a visual indicator that the likes are being fetched.

Changes Made:

Added:

• /src/styles/animations/loading-icon.scss

• Added a new file to hold the keyframes for the loading icon (spinner) animation.

---

Modified:

• /src/components/UI/LikeButton.tsx

• Imported the VscLoading icon from react-icons/vsc to use as the loading spinner.

• Imported the loading-icon.scss stylesheets to use the keyframes for the loading spinner.

• The spinner operates as follows:

  The loading spinner will be shown in two situations, at first render, i.e
  when the likes are been fetched, and when the user likes a project, i.e if
  The user likes it, it will render the spinner until the request is finished and shows the updated number of likes or an error message if the POST request fails.

---

Deleted:

• n/a.

---

Impact:

This change will have a positive impact on the user experience, as it will provide a visual indicator that the likes are being fetched. This will help to reduce confusion and provide a better user experience.

Testing:

• n/a.

Related Issues:

• Closes [2pt] Loading state for LikeButton UI component #9.

Dependencies:

• n/a.

Additional Notes:

• These changes will not be deployed until after issue [3pt] Excessive Involvement API Requests Triggered by -LikeButton- Component  #14 has been addressed. The next deployment is scheduled to occur following the resolution of issue [3pt] Excessive Involvement API Requests Triggered by -LikeButton- Component  #14.

---

[ITurres]

✅ Good for merge.