feat: add skeleton loaders for improved UX on slow networks (#3293)#207
feat: add skeleton loaders for improved UX on slow networks (#3293)#207krishivsaini wants to merge 3 commits into
Conversation
krishivsaini
force-pushed
the
feat/skeleton-loaders-slow-networks
branch
3 times, most recently
from
83da72e to
5456d18
Compare
There was a problem hiding this comment.
Pull request overview
This PR implements skeleton loaders to improve perceived performance on slow networks by showing placeholder content while data is being fetched. The implementation uses a dual approach: inline HTML in _document.tsx for instant display and React-based skeletons in individual pages that show during hydration.
Key Changes
- Added shadcn/ui Skeleton component with reusable skeleton variants for blog elements (HeroPost, PostCard, PostPreview, PostGrid, and PostDetail)
- Implemented hydration-based skeleton display logic in index pages (technology and community) using
isHydratedstate - Created inline HTML skeleton in
_document.tsxthat displays before React loads - Updated Next.js image configuration from deprecated
domainstoremotePatterns
Reviewed changes
Copilot reviewed 13 out of 15 changed files in this pull request and generated 15 comments.
Show a summary per file
| File | Description |
|---|---|
| pages/technology/index.tsx | Added hydration-based skeleton with inline HTML structure for hero and post grid |
| pages/technology/[slug].tsx | Replaced "Loading..." text with PostDetailSkeleton component for fallback state |
| pages/index.tsx | Added hydration state tracking and passed loading prop to TopBlogs component |
| pages/community/index.tsx | Added hydration-based skeleton with inline HTML structure (mirrors technology page) |
| pages/community/[slug].tsx | Replaced "Loading..." text with PostDetailSkeleton component for fallback state |
| pages/_document.tsx | Added critical CSS and inline HTML skeleton that displays before React hydration |
| pages/_app.tsx | Added unused initialLoad state variable |
| next.config.js | Migrated from deprecated domains to remotePatterns for Next.js image configuration |
| components/ui/skeleton.tsx | New base Skeleton component using Tailwind animations and cn utility |
| components/topBlogs.tsx | Added conditional rendering to show PostGridSkeleton during loading state |
| components/skeletons.tsx | New skeleton components (PostCard, HeroPost, PostPreview, PostGrid, MoreStories) |
| components/more-stories.tsx | Added PostGridSkeleton display during pagination loading |
| components/PostDetailSkeleton.tsx | New comprehensive skeleton for post detail pages |
| components/PageLoadingSkeleton.tsx | New page-level skeleton wrapper (not currently used) |
| package-lock.json | Updated caniuse-lite version |
Comments suppressed due to low confidence (3)
pages/_app.tsx:15
- Unused variable initialLoad.
const [initialLoad, setInitialLoad] = useState(true);
pages/community/index.tsx:10
- Unused imports HeroPostSkeleton, MoreStoriesSkeleton.
import { HeroPostSkeleton, MoreStoriesSkeleton } from "../../components/skeletons";
pages/technology/index.tsx:11
- Unused imports HeroPostSkeleton, MoreStoriesSkeleton.
import { HeroPostSkeleton, MoreStoriesSkeleton } from "../../components/skeletons";
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
krishivsaini
force-pushed
the
feat/skeleton-loaders-slow-networks
branch
from
2dd4164 to
095d8ed
Compare
|
@amaan-bhati Is it need to change ? |
|
Hey @kaushiktak19 Can you please do the first review? Let me know once your review is done and the changes have been made, I will do the second review after that. |
|
Hello @amaan-bhati, My First Level review is not Done yet |
|
Hey @krishivsaini The lighthouse ci here can be ignored for a while, we are concerned about the other changes and the review on your ened, can you also take a look at the merge conflicts before we review everything on localhost on our end. |
- Add skeleton components using shadcn/ui - Implement instant skeleton display using inline HTML in _document.tsx - Add skeleton loaders to all pages (home, technology, community, post details) - Skeleton appears immediately on page load before JavaScript executes - Improves perceived performance on 3G/4G networks Signed-off-by: Krishiv Saini <krishivsaini1506@gmail.com>
- Fix invalid Tailwind class w-22 to w-[5.5rem] - Remove unused skeleton component imports - Remove debug console.log statement - Replace inline styles with Tailwind mt-8 class - Match skeleton styling to actual PostCard component - Simplify skeleton hide script Signed-off-by: Krishiv Saini <krishivsaini67@gmail.com> Signed-off-by: Krishiv Saini <krishivsaini1506@gmail.com>
krishivsaini
force-pushed
the
feat/skeleton-loaders-slow-networks
branch
from
095d8ed to
3119088
Compare
|
@amaan-bhati |
… components - Add shimmer gradient animation to base Skeleton component - Add skeleton-shimmer keyframes to index.css - Improve skeleton styling with better shadows and spacing - Replace inline skeleton divs with reusable components in tech/community pages - Fix TopBlogs prop mismatch in index.tsx that caused runtime error - Add missing isCommunity and isIndex props to HeroPost/MoreStories calls Signed-off-by: Krishiv Saini <krishivsaini1506@gmail.com>
krishivsaini
force-pushed
the
feat/skeleton-loaders-slow-networks
branch
from
8c55423 to
fa9c86a
Compare
|
Hey @krishivsaini 👋 — thanks a lot for taking the time to contribute, we genuinely appreciate it! After reviewing this PR, we won't be able to merge it at this time. Here's the reason:
Please don't be discouraged — we'd love to see more contributions from you. Feel free to open a new PR if you think this can be reworked, or reach out if you have any questions. Thanks again for your effort!😊 |
Related Tickets & Documents
Fixes: #3293
Description
Implemented skeleton loaders to improve user experience on slow 3G/4G networks. Users now see skeleton placeholders immediately when the page loads, providing visual feedback while content is being fetched and rendered.
The implementation uses inline HTML in
_document.tsxthat renders instantly before JavaScript executes, ensuring skeletons appear immediately on page navigation even on extremely slow connections.Changes
_document.tsxType of Change
Testing
Demo
Screen.Recording.2025-11-22.at.2.10.56.AM.mov
Test Instructions:
Environment and Dependencies
New Dependencies:
class-variance-authority: ^0.7.0 (for skeleton component variants)clsx: ^2.0.0 (for className utilities)tailwind-merge: ^2.0.0 (for Tailwind class merging)Configuration Changes:
next.config.jsto useremotePatternsinstead of deprecateddomainsfor image configurationChecklist