You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This PR addresses the issue of the loading indicator prematurely reaching 100% when actual page loading exceeds the specified duration, leading to a stagnant indicator and potential user confusion.
Objective:
Improve UX for extended load times: implement a loading indicator that dynamically adjusts its progression, preventing it from indicating 100% completion until the page has fully loaded. This change aims to enhance user experience by providing a more accurate visual representation of the loading status, particularly in longer loading scenarios.
Key Changes:
Updated Loading Indicator behavior: Modified the loading indicator to avoid reaching 100% too quickly when the page loading exceeds the specified duration. The indicator now gradually slows down after hitting 50% (by default, can be adjusted with added progressionRate property) progress, ensuring a continuous display of loading progress even during longer load times. This approach provides a more accurate representation of the ongoing loading process.
Added property to adjust the function used for calculating the progress value: progressionRate controls the steepness of the non-linear function used in calculating progress. A lower value results in a steeper curve, meaning faster initial progress that slows down more sharply towards the end
Progress calculation function: Implemented a new function to calculate the progress value. This function is based on a scaled and shifted arctangent (atan) function, providing a smoother progression curve.
Smoothness improvement: Replaced setInterval with requestAnimationFrame for the progress value calculation. This change enhances the smoothness, contributing to better user experience and performance.
- replace setInterval with RAF - in order to ensure smoother animation and better UX
- implement default timing function based on arctangent trigonometric function - so as to improve UX
- add according prop to accept custom timing function - to enable define custom behavior
I'm not sure that it can be considered as a new feature, I ticked that type according to the issue name - there is "Feature Request" in the name. Please let me know if it needs to be changed.
I've noticed some failed checks that I'm unable to reproduce locally. Could these be related to the changes I made? I'm keen to resolve this issue to help get this PR merged. Any guidance or pointers on what I should focus on would be greatly appreciated.
I am not seeing that much of a difference if I set the progression-rate to 5 or 95 the results are too similar. I wanted to achieve a similar style to how GitHub's progress bar works (reaches 20% and then moves very slowly) but I wasn't able to do that with changing the value of progression-rate. I wish there was more control given to the user to provide a custom timing function or even better if it could be achieved with adjusting the props.
huang-julien
changed the title
feat: loading indicator enhancement
feat(nuxt): loading indicator enhancement
Jan 27, 2024
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
ivan-kalachikov
changed the title
huang-julien
changed the title
🔗 Linked issue
24552
❓ Type of change
📚 Description
Resolves: #24552
The problem:
This PR addresses the issue of the loading indicator prematurely reaching 100% when actual page loading exceeds the specified duration, leading to a stagnant indicator and potential user confusion.
Objective:
Improve UX for extended load times: implement a loading indicator that dynamically adjusts its progression, preventing it from indicating 100% completion until the page has fully loaded. This change aims to enhance user experience by providing a more accurate visual representation of the loading status, particularly in longer loading scenarios.
Key Changes:
progressionRateproperty) progress, ensuring a continuous display of loading progress even during longer load times. This approach provides a more accurate representation of the ongoing loading process.Result:
📝 Checklist