feat: add skeleton loaders for improved UX #223

manthansubhash01 · 2025-12-19T09:42:25Z

Related Tickets & Documents

Fixes: #3293

Description

Added skeleton loaders across the blog website to improve user experience during content loading. This provides visual feedback to users while data is being fetched, making the application feel more responsive and reducing perceived loading times.

The implementation uses shadcn/ui's skeleton component as the base and creates custom skeleton loaders for different content types (hero posts, post cards, post grids, and top blogs).

Changes

Added shadcn/ui skeleton component to the project
Created 4 custom skeleton components (HeroPostSkeleton, PostCardSkeleton, PostGridSkeleton, TopBlogsSkeleton)
Integrated loading states on homepage, community page, and technology page
Added proper loading state management with conditional rendering
Updated component structure to support skeleton loaders

Type of Change

New feature (change that adds functionality)
UI improvement (visual or design changes)

Testing

Tested skeleton loaders appear correctly during initial page load
Verified smooth transition from skeleton to actual content
Tested responsive behavior across mobile, tablet, and desktop viewports
Confirmed no console errors or warnings
Verified all pages (home, community, technology) display appropriate skeletons
Tested with slow network throttling to ensure skeletons remain visible during loading

Demo

Before

After

Environment and Dependencies

New Dependencies:
- @radix-ui/react-slot (added by shadcn/ui)
- class-variance-authority (for component variants)
- tailwind-merge (for className utilities)
- lucide-react (for icons, if not already present)
Configuration Changes:
- Added components.json for shadcn/ui configuration
- Added lib/utils.ts for cn() utility function
- No environment variable changes required

Checklist

My code follows the style guidelines of this project
I have performed a self-review of my own code
I have made corresponding changes to the documentation
I have added corresponding tests
I have run the build command to ensure there are no build errors
My changes have been tested across relevant browsers/devices
For UI changes, I've included visual evidence of my changes

Copilot

Pull request overview

This PR adds skeleton loaders across the blog website to improve perceived loading times and provide visual feedback during content loading. The implementation uses shadcn/ui's skeleton component as a foundation and creates custom skeleton components for different content types.

Key changes:

Added base skeleton component and 4 custom skeleton variations (HeroPostSkeleton, PostCardSkeleton, PostGridSkeleton, TopBlogsSkeleton)
Implemented client-side loading states with artificial 500ms delays on homepage, community, and technology pages
Removed the global PageLoader component and route change loading indicators from _app.tsx

Reviewed changes

Copilot reviewed 12 out of 13 changed files in this pull request and generated 11 comments.

Show a summary per file

File	Description
`lib/utils.ts`	Adds cn() utility function for merging Tailwind classes
`components/ui/skeleton.tsx`	Base skeleton component with pulse animation
`components/skeletons/HeroPostSkeleton.tsx`	Skeleton loader for hero post layout
`components/skeletons/PostCardSkeleton.tsx`	Skeleton loader for individual post cards
`components/skeletons/PostGridSkeleton.tsx`	Skeleton loader for post grid layouts
`components/skeletons/TopBlogsSkeleton.tsx`	Skeleton loader for top blogs list (unused)
`pages/index.tsx`	Adds loading state with artificial delay for homepage posts
`pages/community/index.tsx`	Adds loading state with artificial delay for community posts
`pages/technology/index.tsx`	Adds loading state with artificial delay for technology posts
`components/topBlogs.tsx`	Integrates skeleton loaders for technology and community blog sections
`components/more-stories.tsx`	Adds skeleton loader for initial load state
`pages/_app.tsx`	Removes PageLoader component and route transition loading logic
`package-lock.json`	Updates package name from "blog-website" to "keploy-blog-website"

Comments suppressed due to low confidence (1)

pages/technology/index.tsx:42

During the loading state, the Layout component receives undefined values for featuredImage and Title props (heroPost is undefined when displayPosts is empty). This could cause issues with SEO meta tags and OpenGraph data. Consider using the original edges data for Layout props or provide fallback values.

    <Layout
      preview={preview}
      featuredImage={heroPost?.featuredImage?.node.sourceUrl}
      Title={heroPost?.title}
      Description={`Blog from the Technology Page`}
    >

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-19T09:52:24Z

pages/index.tsx

+  const [isLoading, setIsLoading] = useState(true);
+  const [displayPosts, setDisplayPosts] = useState({
+    community: [],
+    technology: [],
+  });
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const timer = setTimeout(() => {
+        setDisplayPosts({
+          community: communityPosts || [],
+          technology: technologyPosts || [],
+        });
+        setIsLoading(false);
+      }, 500);

+      return () => clearTimeout(timer);
+    }
+  }, [communityPosts, technologyPosts]);
+
+  return (
    <Layout
      preview={preview}
      featuredImage={HOME_OG_IMAGE_URL}
      Title={`Blog - Keploy`}
-      Description={"The Keploy Blog offers in-depth articles and expert insights on software testing, automation, and quality assurance, empowering developers to enhance their testing strategies and deliver robust applications."}>
+      Description={
+        "The Keploy Blog offers in-depth articles and expert insights on software testing, automation, and quality assurance, empowering developers to enhance their testing strategies and deliver robust applications."
+      }
+    >


The loading state starts as true, which means the statically generated HTML (from getStaticProps) will contain skeleton loaders instead of actual content. This defeats the purpose of static generation and harms SEO, as search engines and users will initially see skeleton loaders. For statically generated pages, the content should be rendered immediately without a loading state.

Copilot · 2025-12-19T09:52:25Z

pages/technology/index.tsx

+    }
+  }, [edges]);
+
+  console.log("tech posts: ", edges.length);


Console.log statements should be removed from production code. This debug statement can cause performance issues and expose implementation details in production.

Suggested change

console.log("tech posts: ", edges.length);

Copilot · 2025-12-19T09:52:25Z

pages/_app.tsx

 function MyApp({ Component, pageProps }: AppProps) {
-  const [loading, setLoading] = useState(false);
-  useEffect(() => {
-    // Used for page transition
-    const startLoader = () => {
-      setLoading(true);
-    };
-    const stopLoader = () => {
-      setLoading(false);
-    };
-    Router.events.on("routeChangeStart", startLoader);
-    Router.events.on("routeChangeComplete", stopLoader);
-    Router.events.on("routeChangeError", stopLoader);
-    return () => {
-      Router.events.off("routeChangeStart", startLoader);
-      Router.events.off("routeChangeComplete", stopLoader);
-      Router.events.off("routeChangeError", stopLoader);
-    };
-  }, []);
-
  return (
    <>
      <AnimatePresence>
-        {loading ? <PageLoader /> : <Component {...pageProps} />}
+        <Component {...pageProps} />
      </AnimatePresence>
    </>
  );
 }


The removal of the PageLoader component and route change listeners means users will no longer see loading feedback during page navigation. This could negatively impact user experience, especially on slower connections. Consider keeping some form of loading indicator for route transitions, or document why this was intentionally removed.

Copilot · 2025-12-19T09:52:26Z

pages/community/index.tsx

+    <Layout
+      preview={preview}
+      featuredImage={heroPost?.featuredImage?.node.sourceUrl}
+      Title={heroPost?.title}
+      Description={`Blog from the Technology Page`}
+    >


During the loading state, the Layout component receives undefined values for featuredImage and Title props (heroPost is undefined when displayPosts is empty). This could cause issues with SEO meta tags and OpenGraph data. Consider using the original edges data for Layout props or provide fallback values.

Copilot · 2025-12-19T09:52:26Z

pages/technology/index.tsx

+    if (typeof window !== "undefined") {
+      const timer = setTimeout(() => {
+        setDisplayPosts(edges || []);
+        setIsLoading(false);
+      }, 500);
+
+      return () => clearTimeout(timer);
+    }


The condition "typeof window !== 'undefined'" is unnecessary in a useEffect hook. useEffect only runs on the client side, so window is always defined. This check should be removed to simplify the code.

Suggested change

if (typeof window !== "undefined") {

const timer = setTimeout(() => {

setDisplayPosts(edges || []);

setIsLoading(false);

}, 500);

return () => clearTimeout(timer);

}

const timer = setTimeout(() => {

setDisplayPosts(edges || []);

setIsLoading(false);

}, 500);

return () => clearTimeout(timer);

Copilot · 2025-12-19T09:52:26Z

pages/community/index.tsx

+    if (typeof window !== "undefined") {
+      const timer = setTimeout(() => {
+        setDisplayPosts(edges || []);
+        setIsLoading(false);
+      }, 500);
+
+      return () => clearTimeout(timer);
+    }


The condition "typeof window !== 'undefined'" is unnecessary in a useEffect hook. useEffect only runs on the client side, so window is always defined. This check should be removed to simplify the code.

Suggested change

if (typeof window !== "undefined") {

const timer = setTimeout(() => {

setDisplayPosts(edges || []);

setIsLoading(false);

}, 500);

return () => clearTimeout(timer);

}

const timer = setTimeout(() => {

setDisplayPosts(edges || []);

setIsLoading(false);

}, 500);

return () => clearTimeout(timer);

Copilot · 2025-12-19T09:52:27Z

pages/index.tsx

+    if (typeof window !== "undefined") {
+      const timer = setTimeout(() => {
+        setDisplayPosts({
+          community: communityPosts || [],
+          technology: technologyPosts || [],
+        });
+        setIsLoading(false);
+      }, 500);

+      return () => clearTimeout(timer);
+    }


The condition "typeof window !== 'undefined'" is unnecessary in a useEffect hook. useEffect only runs on the client side, so window is always defined. This check should be removed to simplify the code.

Suggested change

if (typeof window !== "undefined") {

const timer = setTimeout(() => {

setDisplayPosts({

community: communityPosts || [],

technology: technologyPosts || [],

});

setIsLoading(false);

}, 500);

return () => clearTimeout(timer);

}

const timer = setTimeout(() => {

setDisplayPosts({

community: communityPosts || [],

technology: technologyPosts || [],

});

setIsLoading(false);

}, 500);

return () => clearTimeout(timer);

Copilot · 2025-12-19T09:52:27Z

components/ui/skeleton.tsx

+      className={cn(
+        "animate-pulse rounded-md bg-gray-200 dark:bg-gray-800",
+        className
+      )}
+      {...props}
+    />


The skeleton loader lacks ARIA attributes to indicate loading state to screen readers. Add role="status" and aria-live="polite" attributes along with visually hidden text like "Loading content..." to improve accessibility for users with assistive technologies.

Suggested change

className={cn(

"animate-pulse rounded-md bg-gray-200 dark:bg-gray-800",

className

)}

{...props}

/>

role="status"

aria-live="polite"

className={cn(

"animate-pulse rounded-md bg-gray-200 dark:bg-gray-800",

className

)}

{...props}

>

<span className="sr-only">Loading content...</span>

</div>

Copilot · 2025-12-19T09:52:27Z

components/more-stories.tsx

+          {loading && visibleCount === 0 ? (
+            <PostGridSkeleton count={12} />
+          ) : (


The skeleton loader will never display because visibleCount is initialized to 12 on line 40 and is never set to 0. The condition "loading && visibleCount === 0" will always be false. Consider using a different condition, such as checking if this is the initial load or if allPosts is empty.

Signed-off-by: manthansubhash01 <manthanziman20@gmail.com>

amaan-bhati · 2025-12-30T07:06:18Z

Hey @manthansubhash01 Thanks for raising the pr, preview looks good to me. Can you please take a look at the copilot review and the merge conflicts?

manthansubhash01 · 2025-12-30T15:23:12Z

@amaan-bhati
Thank you for the review. I’ve already made the changes suggested by Copilot and also resolved the conflicts.

Signed-off-by: Manthan Ziman <manthanziman20@gmail.com>

Copilot AI review requested due to automatic review settings December 19, 2025 09:42

Copilot started reviewing on behalf of manthansubhash01 December 19, 2025 09:42 View session

Copilot AI reviewed Dec 19, 2025

View reviewed changes

manthansubhash01 force-pushed the feature/skeleton-loaders branch from 83f914b to d190e37 Compare December 19, 2025 10:15

manthansubhash01 force-pushed the feature/skeleton-loaders branch from cbf96a7 to f29ac47 Compare December 29, 2025 19:25

manthansubhash01 added 3 commits December 30, 2025 00:56

feat: add skeleton loaders for improved UX

8cddbdd

Signed-off-by: manthansubhash01 <manthanziman20@gmail.com>

fix: improve skeleton loaders and restore page navigation

cd7cf7e

Signed-off-by: manthansubhash01 <manthanziman20@gmail.com>

resolved all performace errors and removed redundant checks

103d1d5

Signed-off-by: manthansubhash01 <manthanziman20@gmail.com>

manthansubhash01 force-pushed the feature/skeleton-loaders branch from f29ac47 to 103d1d5 Compare December 29, 2025 19:26

manthansubhash01 added 2 commits December 30, 2025 23:47

Merge branch 'main' into feature/skeleton-loaders

bd6f2ed

Signed-off-by: Manthan Ziman <manthanziman20@gmail.com>

Merge branch 'main' into feature/skeleton-loaders

b967de3

feat: add skeleton loaders for improved UX #223

Are you sure you want to change the base?

feat: add skeleton loaders for improved UX #223

Uh oh!

Conversation

manthansubhash01 commented Dec 19, 2025

Related Tickets & Documents

Description

Changes

Type of Change

Testing

Demo

Before

After

Environment and Dependencies

Checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

amaan-bhati commented Dec 30, 2025

Uh oh!

manthansubhash01 commented Dec 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

manthansubhash01 commented Dec 30, 2025 •

edited

Loading