MP-172 - prevent data flicker

Author: vas3a

src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.tsx

@@ -4,7 +4,7 @@ import { useSearchParams } from 'react-router-dom'
 import {
     MemberTraitsAPI,
     useMemberTraits,
-    UserCompletedCertificationsData,
+    UserCompletedCertificationsResponse,
     UserProfile,
     UserTrait,
     UserTraitIds,
@@ -29,17 +29,19 @@ const EducationAndCertifications: FC<EducationAndCertificationsProps> = (props:
     const [queryParams]: [URLSearchParams, any] = useSearchParams()
     const editMode: string | null = queryParams.get(EDIT_MODE_QUERY_PARAM)
 
-    const { data: memberTCA }: { data: UserCompletedCertificationsData | undefined }
+    const { data: memberTCA, loading: tcaDataLoading }: UserCompletedCertificationsResponse
         = useUserCompletedCertifications(props.profile?.userId)
 
     const canEdit: boolean = props.authProfile?.handle === props.profile.handle
 
     const [isEditMode, setIsEditMode]: [boolean, Dispatch<SetStateAction<boolean>>]
         = useState<boolean>(false)
 
-    const { data: memberEducationTraits, mutate: mutateTraits, loading }: MemberTraitsAPI
+    const { data: memberEducationTraits, mutate: mutateTraits, loading: traitsLoading }: MemberTraitsAPI
         = useMemberTraits(props.profile.handle, { traitIds: UserTraitIds.education })
 
+    const loading = tcaDataLoading || traitsLoading
+
     const memberEducation: UserTrait[] | undefined
         = useMemo(() => memberEducationTraits?.[0]?.traits?.data, [memberEducationTraits])
 
@@ -111,7 +113,7 @@ const EducationAndCertifications: FC<EducationAndCertificationsProps> = (props:
                 </EmptySection>
             )}
 
-            {canEdit && !hasEducationData && (
+            {!loading && canEdit && !hasEducationData && (
                 <AddButton
                     label='Add education & certifications'
                     onClick={handleEditEducationClick}

src/apps/profiles/src/member-profile/languages/MemberLanguages.tsx

@@ -1,8 +1,7 @@
 import { Dispatch, FC, SetStateAction, useEffect, useMemo, useState } from 'react'
-import { KeyedMutator } from 'swr'
 import { useSearchParams } from 'react-router-dom'
 
-import { useMemberTraits, UserProfile, UserTrait, UserTraitIds, UserTraits } from '~/libs/core'
+import { MemberTraitsAPI, useMemberTraits, UserProfile, UserTrait, UserTraitIds } from '~/libs/core'
 
 import { AddButton, EditMemberPropertyBtn } from '../../components'
 import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
@@ -26,10 +25,7 @@ const MemberLanguages: FC<MemberLanguagesProps> = (props: MemberLanguagesProps)
     const [isEditMode, setIsEditMode]: [boolean, Dispatch<SetStateAction<boolean>>]
         = useState<boolean>(false)
 
-    const { data: memberLanguageTraits, mutate: mutateTraits }: {
-        data: UserTraits[] | undefined,
-        mutate: KeyedMutator<any>,
-    }
+    const { data: memberLanguageTraits, mutate: mutateTraits, loading }: MemberTraitsAPI
         = useMemberTraits(props.profile.handle, { traitIds: UserTraitIds.languages })
 
     const memberLanguages: UserTrait[] | undefined
@@ -58,7 +54,7 @@ const MemberLanguages: FC<MemberLanguagesProps> = (props: MemberLanguagesProps)
         }, 1000)
     }
 
-    return canEdit || memberLanguages ? (
+    return !loading && (canEdit || memberLanguages) ? (
         <div className={styles.container}>
             <div className={styles.titleWrap}>
                 <p className='body-main-bold'>Languages</p>

src/apps/profiles/src/member-profile/links/MemberLinks.tsx

@@ -1,8 +1,7 @@
 import { Dispatch, FC, SetStateAction, useEffect, useMemo, useState } from 'react'
-import { KeyedMutator } from 'swr'
 import { useSearchParams } from 'react-router-dom'
 
-import { useMemberTraits, UserProfile, UserTrait, UserTraitIds, UserTraits } from '~/libs/core'
+import { MemberTraitsAPI, useMemberTraits, UserProfile, UserTrait, UserTraitIds } from '~/libs/core'
 import {
     IconOutline,
     SocialIconFacebook,
@@ -53,10 +52,7 @@ const MemberLinks: FC<MemberLinksProps> = (props: MemberLinksProps) => {
     const [isEditMode, setIsEditMode]: [boolean, Dispatch<SetStateAction<boolean>>]
         = useState<boolean>(false)
 
-    const { data: memberPersonalizationTraits, mutate: mutateTraits }: {
-        data: UserTraits[] | undefined,
-        mutate: KeyedMutator<any>,
-    }
+    const { data: memberPersonalizationTraits, mutate: mutateTraits, loading }: MemberTraitsAPI
         = useMemberTraits(props.profile.handle, { traitIds: UserTraitIds.personalization })
 
     const memberLinks: UserTrait | undefined
@@ -87,7 +83,7 @@ const MemberLinks: FC<MemberLinksProps> = (props: MemberLinksProps) => {
         }, 1000)
     }
 
-    return canEdit || memberLinks?.links ? (
+    return !loading && (canEdit || memberLinks?.links) ? (
         <div className={styles.container}>
             <div className={styles.titleWrap}>
                 <p className='body-main-bold'>Links</p>

src/libs/core/lib/profile/data-providers/useUserCompletedCertifications.ts

@@ -14,13 +14,15 @@ export interface UserCompletedCertificationsData {
     courses: ReadonlyArray<LearnUserCertificationProgress>
 }
 
-export function useUserCompletedCertifications(
-    userId: number | undefined,
-): {
+export interface UserCompletedCertificationsResponse {
     data: UserCompletedCertificationsData | undefined
     loading: boolean
     ready: boolean
-} {
+}
+
+export function useUserCompletedCertifications(
+    userId: number | undefined,
+): UserCompletedCertificationsResponse {
 
     const url: string = `${learnBaseURL()}/completed-certifications/${userId}`