Skip to content

feat: add loading animation to improve user experience #439

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: add loading animation to improve user experience #439

wants to merge 1 commit into from

Conversation

Kevin-ZSC
Copy link

@Kevin-ZSC Kevin-ZSC commented Mar 13, 2025 •
edited by sourcery-ai bot
Loading

fixed #438

Description

[Please provide a brief summary of the purpose and context of this pull request, along with a detailed explanation of the changes you've made.]

Screenshots (if applicable)

[include screenshots or GIFs to illustrate your changes, if relevant.]

Related Issues

[Reference any related issues or pull requests by linking them here.]

Checklist

  • [] I have read and followed the project's contributing guidelines.
  • [] I have made necessary updates to the documentation.

Summary by Sourcery

New Features:

  • Add a loading indicator to improve user experience during data loading.

@sourcery-ai Sourcery AI
Copy link
Contributor

sourcery-ai bot commented Mar 13, 2025 •
edited
Loading

Reviewer's Guide by Sourcery

This pull request introduces a loading animation to improve user experience by providing visual feedback during data fetching and processing. The loading indicator is displayed at various stages, such as when the page loads with a video ID or search query, before fetching search results, and when submitting a video ID or URL. The indicator is hidden once the data is loaded or the video player is ready.

Sequence diagram for showing loading indicator on page load

sequenceDiagram
    participant User
    participant Browser
    participant JavaScript

    User->>Browser: Navigates to page with video ID or search query
    Browser->>JavaScript: Executes document.ready function
    JavaScript->>JavaScript: Checks for video ID or search query in URL
    alt URL contains video ID or search query
        JavaScript->>JavaScript: showLoading()
        JavaScript->>Browser: Updates DOM to display loading indicator
    end
    Browser-->>User: Displays loading indicator
Loading

Sequence diagram for showing loading indicator on form submission

sequenceDiagram
    participant User
    participant Browser
    participant JavaScript

    User->>Browser: Enters video ID or URL in form
    User->>Browser: Clicks submit button
    Browser->>JavaScript: Executes form submission handler
    JavaScript->>JavaScript: showLoading()
    JavaScript->>Browser: Updates DOM to display loading indicator
    Browser-->>User: Displays loading indicator
Loading

Sequence diagram for showing loading indicator on demo link click

sequenceDiagram
    participant User
    participant Browser
    participant JavaScript

    User->>Browser: Clicks demo link
    Browser->>JavaScript: Executes demo link click handler
    JavaScript->>JavaScript: showLoading()
    JavaScript->>Browser: Updates DOM to display loading indicator
    Browser-->>User: Displays loading indicator
Loading

Updated class diagram for ZenPlayer

classDiagram
    class ZenPlayer{
        +updated: boolean
        +currentVideoList: array
        +currentVideoID: string
        +plyrPlayer: object
        +init(youTubeDataApiKey: string)
        +playVideo(videoID: string)
        +stopVideo()
    }

    class Helpers {
        +handleYouTubeError(details: object)
        +pickDemo(): string
        +hasValueInURL(): boolean
    }

    class LoadingIndicator {
        +showLoading()
        +hideLoading()
    }

    LoadingIndicator : +showLoading()
    LoadingIndicator : +hideLoading()
    Helpers : +hasValueInURL()
Loading

File-Level Changes

Change Details Files
Implements a loading indicator to provide visual feedback during data fetching and processing.
  • Added functions to show and hide the loading indicator.
  • Displayed the loading indicator when the page loads with a video ID or search query in the URL.
  • Displayed the loading indicator before fetching search results.
  • Displayed the loading indicator before submitting a video ID or URL.
  • Displayed the loading indicator when a demo, focus, or lofi link is clicked.
  • Hid the loading indicator after the video player is ready.
  • Hid the loading indicator after the video starts playing.
  • Hid the loading indicator after search results are loaded.
  • Hid the loading indicator if running locally.
  • Hid the loading indicator when a demo link is clicked and the URL is already valid.
  • Added CSS for the loading indicator and spinner.
 js/everything.js
index.html
css/styles.css

Assessment against linked issues

Issue Objective Addressed Explanation
#438 Add a loading indicator to inform users that the music is buffering. ✅
#438 Investigate ways to reduce the delay (e.g., preloading audio, optimizing API calls). ❌ The PR only adds a loading indicator and does not investigate or implement any methods to reduce the delay itself.
Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!
  • Generate a plan of action for an issue: Comment @sourcery-ai plan on
    an issue to generate a plan of action for it.

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

@vercel Vercel
Copy link

vercel bot commented Mar 13, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
zen-audio-player-github-io ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 13, 2025 0:51am

sourcery-ai[bot]
sourcery-ai bot reviewed Mar 13, 2025
View reviewed changes
Copy link
Contributor

@sourcery-ai sourcery-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @Kevin-ZSC - I've reviewed your changes - here's some feedback:

Overall Comments:

  • Consider adding a CSS class to the loading indicator to center it on the page.
  • It might be good to add a small delay before showing the loading indicator, in case the content loads very quickly.
Here's what I looked at during the review
  • 🟢 General issues: all looks good
  • 🟢 Security: all looks good
  • 🟢 Testing: all looks good
  • 🟢 Complexity: all looks good
  • 🟢 Documentation: all looks good
Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@sourcery-ai sourcery-ai[bot] sourcery-ai[bot] left review comments

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Delay in Music Playback After Clicking Buttons
1 participant
@Kevin-ZSC