diff --git a/src/apps/profiles/src/components/EmptySection/EmptySection.module.scss b/src/apps/profiles/src/components/EmptySection/EmptySection.module.scss index e123fd4d4..5c26c3aa7 100644 --- a/src/apps/profiles/src/components/EmptySection/EmptySection.module.scss +++ b/src/apps/profiles/src/components/EmptySection/EmptySection.module.scss @@ -28,4 +28,9 @@ padding: $sp-15 2*$sp-15; } + @include ltemd { + &, &:global(.m-lg) { + padding: $sp-8 $sp-6; + } + } } diff --git a/src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.module.scss b/src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.module.scss index c8181b50e..fc75861eb 100644 --- a/src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.module.scss +++ b/src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.module.scss @@ -3,6 +3,7 @@ .container { display: flex; flex-direction: column; + padding-bottom: $sp-8; .headerWrap { display: flex; @@ -19,9 +20,15 @@ } } + .emptyBlock { + display: none; + } + .educationContentWrap { display: flex; flex-direction: column; - padding-bottom: $sp-8; + &:empty + .emptyBlock { + display: flex; + } } } diff --git a/src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.tsx b/src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.tsx index 1bf092b41..b6e318a01 100644 --- a/src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.tsx +++ b/src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.tsx @@ -2,7 +2,7 @@ import { Dispatch, FC, SetStateAction, useEffect, useMemo, useState } from 'reac import { useSearchParams } from 'react-router-dom' import { KeyedMutator } from 'swr' -import { useMemberTraits, UserProfile, UserTrait, UserTraitIds, UserTraits } from '~/libs/core' +import { MemberTraitsAPI, useMemberTraits, UserProfile, UserTrait, UserTraitIds, UserTraits } from '~/libs/core' import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config' import { EditMemberPropertyBtn, EmptySection } from '../../components' @@ -27,10 +27,7 @@ const EducationAndCertifications: FC = (props: const [isEditMode, setIsEditMode]: [boolean, Dispatch>] = useState(false) - const { data: memberEducationTraits, mutate: mutateTraits }: { - data: UserTraits[] | undefined, - mutate: KeyedMutator, - } + const { data: memberEducationTraits, mutate: mutateTraits, loading }: MemberTraitsAPI = useMemberTraits(props.profile.handle, { traitIds: UserTraitIds.education }) const memberEducation: UserTrait[] | undefined @@ -73,28 +70,33 @@ const EducationAndCertifications: FC = (props:
- {(memberEducation?.length as number) > 0 - ? memberEducation?.map((education: UserTrait) => ( - - )) - : ( - - I'm still building up my education and certifications here at Topcoder. - - )} + {!loading && ( + (memberEducation?.length as number) > 0 && ( + memberEducation?.map((education: UserTrait) => ( + + )) + ) + )}
+ {!loading && !memberEducation?.length && ( + + I'm still building up my education and certifications here at Topcoder. + + )} + { isEditMode && ( = (props: WorkExpirenceProps) => { const [isEditMode, setIsEditMode]: [boolean, Dispatch>] = useState(false) - const { data: memberWorkExpirenceTraits, mutate: mutateTraits }: { - data: UserTraits[] | undefined, - mutate: KeyedMutator, - } + const { data: memberWorkExpirenceTraits, mutate: mutateTraits, loading }: MemberTraitsAPI = useMemberTraits(props.profile.handle, { traitIds: UserTraitIds.work }) const workExpirence: UserTrait[] | undefined @@ -72,18 +68,20 @@ const WorkExpirence: FC = (props: WorkExpirenceProps) => {
- {(workExpirence?.length as number) > 0 - ? workExpirence?.map((work: UserTrait) => ( - - )) - : ( - - I'm still building up my experience here at Topcoder. - - )} + {!loading && ( + (workExpirence?.length as number) > 0 + ? workExpirence?.map((work: UserTrait) => ( + + )) + : ( + + I'm still building up my experience here at Topcoder. + + ) + )}
{ diff --git a/src/libs/core/lib/profile/data-providers/useMemberTraits.ts b/src/libs/core/lib/profile/data-providers/useMemberTraits.ts index bc27d257b..b94e876be 100644 --- a/src/libs/core/lib/profile/data-providers/useMemberTraits.ts +++ b/src/libs/core/lib/profile/data-providers/useMemberTraits.ts @@ -6,6 +6,7 @@ import { UserTraits } from '../user-traits.model' export interface MemberTraitsAPI { data: UserTraits[] | undefined + loading: boolean mutate: KeyedMutator } @@ -14,11 +15,12 @@ export interface MemberTraitsQuery { } export function useMemberTraits(handle?: string, query?: MemberTraitsQuery): MemberTraitsAPI { - const { data, mutate }: SWRResponse + const { data, mutate, isValidating, error }: SWRResponse = useSWR(handle ? `${getProfileUrl(handle)}/traits?${qs.stringify(query)}` : undefined) return { data, + loading: isValidating && !data && !error, mutate, } }