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 |
sorry for my mistake. I will change as per requirement. |
preview.mov@ShiboSoftwareDev I fixed required changes; please review this. i have also attched preview if anything other changes are require let o me know |
|
@ShiboSoftwareDev please review this |
/claim #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: