in src/contactCard/OrgDetails.tsx [7:35]
export function renderOrgHierarchy(profile: IPersonaProfile, allManagers: IPersonaProfile[] | undefined, directs: IPersonaProfile[] | undefined, onPersonaClick: (profile: IPersonaProfile) => void): React.ReactNode {
return allManagers ?
(
<>
<Label className="org-hierarchy-title">Organization</Label>
<ul className={css("org-hierarchy", AnimationClassNames.slideLeftIn400)}>
{renderAllManagers(allManagers, onPersonaClick)}
<li className="person-current">
<Persona
id={profile.id}
displayName={profile.displayName}
showMode={PersonaShowMode.NameTitleDepartment}
size={PersonaSize.size48}
/>
</li>
{renderDirects(directs, onPersonaClick)}
</ul>
</>
) :
(
<ul className={css("org-hierarchy", AnimationClassNames.slideLeftIn400)}>
<li className="person"><Shimmer shimmerElements={[{ type: ShimmerElementType.circle, height: 48 }, { type: ShimmerElementType.gap, width: 12 }, { type: ShimmerElementType.line }]} width={"80%"} /></li>
<div className="hierarchy-splitter" />
<li className="person"><Shimmer shimmerElements={[{ type: ShimmerElementType.circle, height: 48 }, { type: ShimmerElementType.gap, width: 12 }, { type: ShimmerElementType.line }]} width={"80%"} /></li>
<div className="hierarchy-splitter" />
<li className="person"><Shimmer shimmerElements={[{ type: ShimmerElementType.circle, height: 48 }, { type: ShimmerElementType.gap, width: 12 }, { type: ShimmerElementType.line }]} width={"80%"} /></li>
</ul>
);
}