From 988f291b70963a6dcd90e91c8b908f3963241d18 Mon Sep 17 00:00:00 2001
From: AmarTrebinjac <amartrebinjac@gmail.com>
Date: Thu, 5 Feb 2026 14:48:35 +0000
Subject: [PATCH] feat(profile): add loading skeleton to experience pages

Show a loading skeleton with 2 placeholder items while experience data
is being fetched, instead of showing misleading "No experiences" message.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../components/profile/ExperienceSettings.tsx | 14 +++++-
 .../experience/UserExperienceItemSkeleton.tsx | 43 +++++++++++++++++++
 2 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 packages/shared/src/features/profile/components/experience/UserExperienceItemSkeleton.tsx

diff --git a/packages/shared/src/components/profile/ExperienceSettings.tsx b/packages/shared/src/components/profile/ExperienceSettings.tsx
index a9d8bd3f04..11884da5e0 100644
--- a/packages/shared/src/components/profile/ExperienceSettings.tsx
+++ b/packages/shared/src/components/profile/ExperienceSettings.tsx
@@ -6,6 +6,7 @@ import { UserExperienceList } from '../../features/profile/components/experience
 import { useAuthContext } from '../../contexts/AuthContext';
 import type { PublicProfile } from '../../lib/user';
 import { ExperienceEmptyState } from './ExperienceEmptyState';
+import { UserExperienceItemSkeleton } from '../../features/profile/components/experience/UserExperienceItemSkeleton';
 
 type ExperienceSettingsProps = {
   experienceType: UserExperienceType;
@@ -17,7 +18,18 @@ export const ExperienceSettings = ({
   emptyStateMessage,
 }: ExperienceSettingsProps): ReactElement => {
   const { user } = useAuthContext();
-  const { experiences } = useUserExperiencesByType(experienceType, user?.id);
+  const { experiences, isPending } = useUserExperiencesByType(
+    experienceType,
+    user?.id,
+  );
+
+  if (isPending) {
+    return (
+      <div className="flex flex-col gap-4">
+        <UserExperienceItemSkeleton count={2} />
+      </div>
+    );
+  }
 
   return (
     <div className="flex flex-col gap-4">
diff --git a/packages/shared/src/features/profile/components/experience/UserExperienceItemSkeleton.tsx b/packages/shared/src/features/profile/components/experience/UserExperienceItemSkeleton.tsx
new file mode 100644
index 0000000000..0add1a224c
--- /dev/null
+++ b/packages/shared/src/features/profile/components/experience/UserExperienceItemSkeleton.tsx
@@ -0,0 +1,43 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { ElementPlaceholder } from '../../../../components/ElementPlaceholder';
+
+interface UserExperienceItemSkeletonProps {
+  count?: number;
+}
+
+export function UserExperienceItemSkeleton({
+  count = 2,
+}: UserExperienceItemSkeletonProps): ReactElement {
+  return (
+    <ul className="flex flex-col gap-4" aria-busy="true">
+      {Array.from({ length: count }).map((_, index) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <li key={`skeleton-${index}`} className="flex flex-row gap-2">
+          {/* Company logo placeholder */}
+          <ElementPlaceholder className="size-8 rounded-full" />
+
+          <div className="flex flex-1 flex-col gap-2">
+            {/* Title line */}
+            <ElementPlaceholder className="h-4 w-3/5 rounded-8" />
+            {/* Company name line */}
+            <ElementPlaceholder className="h-3 w-2/5 rounded-8" />
+            {/* Date/location line */}
+            <ElementPlaceholder className="h-3 w-1/3 rounded-8" />
+            {/* Description lines */}
+            <div className="flex flex-col gap-1 pt-1">
+              <ElementPlaceholder className="h-3 w-full rounded-8" />
+              <ElementPlaceholder className="h-3 w-4/5 rounded-8" />
+            </div>
+            {/* Skills pills */}
+            <div className="flex flex-row gap-2 pt-1">
+              <ElementPlaceholder className="h-6 w-16 rounded-8" />
+              <ElementPlaceholder className="h-6 w-20 rounded-8" />
+              <ElementPlaceholder className="h-6 w-14 rounded-8" />
+            </div>
+          </div>
+        </li>
+      ))}
+    </ul>
+  );
+}