maronato/cal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: settings: skeleton issues (CALCOM-9627) (#9641) 

Co-authored-by: gitstart-calcom <gitstart@users.noreply.github.com>
This commit is contained in:
GitStart-Cal.com 2023-06-20 18:20:13 +08:00 committed by GitHub
parent 4cc8a6fbf4
commit f654003f95
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/pages/settings/my-account/profile.tsx
View File

@ -50,7 +50,7 @@ const SkeletonLoader = ({ title, description }: { title: string; description: st
<Meta title={title} description={description} />
<div className="mt-6 mb-8 space-y-6">
<div className="flex items-center">
<SkeletonAvatar className="h-12 w-12 px-4" />
<SkeletonAvatar className="me-4 h-16 w-16 px-4" />
<SkeletonButton className="h-6 w-32 rounded-md p-5" />
</div>
<SkeletonText className="h-8 w-full" />

19
packages/features/settings/layouts/SettingsLayout.tsx
View File

@ -178,7 +178,7 @@ const BackButtonInSidebar = ({ name }: { name: string }) => {
className="hover:bg-subtle [&[aria-current='page']]:bg-emphasis [&[aria-current='page']]:text-emphasis group-hover:text-default text-emphasis group my-6 flex h-6 max-h-6 w-full flex-row items-center rounded-md py-2 px-3 text-sm font-medium leading-4"
data-testid={`vertical-tab-${name}`}>
<ArrowLeft className="h-4 w-4 stroke-[2px] ltr:mr-[10px] rtl:ml-[10px] rtl:rotate-180 md:mt-0" />
<Skeleton title={name} as="p" className="max-w-36 min-h-4 truncate">
<Skeleton title={name} as="p" className="max-w-36 min-h-4 truncate" loadingClassName="ms-3">
{name}
</Skeleton>
</Link>
@ -245,7 +245,13 @@ const SettingsSidebarContainer = ({
alt="User Avatar"
/>
)}
<p className="truncate text-sm font-medium leading-5">{t(tab.name)}</p>
<Skeleton
title={tab.name}
as="p"
className="truncate text-sm font-medium leading-5"
loadingClassName="ms-3">
{t(tab.name)}
</Skeleton>
</div>
</div>
<div className="my-3 space-y-0.5">
@ -270,7 +276,13 @@ const SettingsSidebarContainer = ({
{tab && tab.icon && (
<tab.icon className="h-[16px] w-[16px] stroke-[2px] ltr:mr-3 rtl:ml-3 md:mt-0" />
)}
<p className="truncate text-sm font-medium leading-5">{t(tab.name)}</p>
<Skeleton
title={tab.name}
as="p"
className="truncate text-sm font-medium leading-5"
loadingClassName="ms-3">
{t(tab.name)}
</Skeleton>
</div>
</Link>
{teams &&
@ -386,6 +398,7 @@ const SettingsSidebarContainer = ({
href={`${WEBAPP_URL}/settings/teams/new`}
textClassNames="px-3 items-center mt-2 text-emphasis font-medium text-sm"
icon={Plus}
iconClassName="me-3"
disableChevron
/>
</div>