implemented skeletons loading page, for all navigation #570
Conversation
SkeletonLoaderSkeletonLoader#
|
/claim #533 |
|
💵 To receive payouts, sign up on Algora, link your Github account and connect with Stripe. |
Thanks, I'm just done with changes you require. i will submit it soon |
- Added a simple and lightweight skeleton loading page for all navigation. - Ensured no JavaScript is loaded via <script> tags for security and performance. - Custom lightweight inline script is used for minimal interactivity. - Fixes issue tscircuit#533. - Implemented skeleton in `index.html` to show loading state until content is fully loaded. Signed-off-by: Saurabhsing21 <[email protected]>
- Added a simple and lightweight skeleton loading page for all navigation. - Ensured no JavaScript is loaded via <script> tags for security and performance. - Custom lightweight inline script is used for minimal interactivity. - Fixes issue tscircuit#533. - Implemented skeleton in `index.html` to show loading state until content is fully loaded. Signed-off-by: Saurabhsing21 <[email protected]>
|
@seveibar @imrishabh18 , I have completed the skeleton loading page implementation in index.html. Please review it and let me know if any further changes are required. |
index.html
Outdated
| <script> | ||
| document.addEventListener("DOMContentLoaded", () => { | ||
| const skeletonLoader = document.getElementById("skeleton-loader"); | ||
| if (skeletonLoader) { | ||
| console.log("Skeleton Loader is displayed."); | ||
| setTimeout(() => { | ||
| skeletonLoader.style.display = "none"; | ||
| }, 300); // Hide skeleton after React initializes | ||
| } | ||
| }); | ||
| </script> |
There was a problem hiding this comment.
@Saurabhsing21 I don't we need the cleanup and hiding of the skeleton at both the places, I see you have added this in the useEffect() hook as well.
There was a problem hiding this comment.
@imrishabh18 just to clarify, do you mean that I should remove the script tag and keep the skeleton hiding logic only in the useEffect() hook?
There was a problem hiding this comment.
Yeah, give it a try. I think that should work
|
Other than that, this LGTM! Make sure you are fixing the format issues |
ok i will fix this |
removed cleanup and hiding of the skeleton from script tag inside index.html using cleanup and hiding of the skeleton with useEffect() in app.tsx Signed-off-by: Saurabhsing21 <[email protected]>
Signed-off-by: Saurabhsing21 <[email protected]>
|
@imrishabh18 please review this, |
|
LGTM! cc: @seveibar |
|
@seveibar if you test the preview, it feels off |
|
@Saurabhsing21 it still doesn't work so don't worry about playwright atm |
Then how to solve this development vs production problem |
|
@Saurabhsing21 only test on production |
…t experience - Ensured loader stays visible for a minimum time to handle fast networks. - Added logic to detect React rendering using MutationObserver. - Enhanced loader hiding with smooth progress bar shrinking effect. - Fixed issues with animation bounds for the loading bar. - Addressed inconsistencies between development and deployment environments. This update ensures a seamless loading experience across all network conditions. Signed-off-by: Saurabhsing21 <[email protected]>
…t experience - Ensured loader stays visible for a minimum time to handle fast networks. - Added logic to detect React rendering using MutationObserver. - Enhanced loader hiding with smooth progress bar shrinking effect. - Fixed issues with animation bounds for the loading bar. - Addressed inconsistencies between development and deployment environments. This update ensures a seamless loading experience across all network conditions. Signed-off-by: Saurabhsing21 <[email protected]>
|
@ShiboSoftwareDev review this i have fixed deployment problem |
|
@Saurabhsing21 when I go to the ai page it appears for a little and then disappears |
|
|
@Saurabhsing21 when I click the AI tab I see the loading screen and then it disappears leaving an empty page before the AI page is loaded |
|
@ShiboSoftwareDev i have removed blank page problem, please check once another thing i want you to chack loading animation for same page navigation, just like LinkedIn and other webpages the use skeleton loading animation for same page navigation so that also implemented same loading animation for same page navigation chec. let me know if there any changes are needed |
Screen.Recording.2025-01-25.123221.mp4 |
|
This PR has been automatically marked as stale because it has had no recent activity. It will be closed if no further activity occurs. |
i am working on it |
/claim #533
Fixes #533
Implementing Skeleton Loading for Navigation and Images
Skeleton loading is a technique used to display a placeholder while content is being loaded, improving user experience by reducing perceived load times. Below is how to implement skeleton loading for Navigation and Images.
Before I:
After: