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 ( +
+ +
+ ); + } return (
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 ( + + ); +}