Heading Skeleton (#2601)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
pull/2587/head^2
sean-brydon 2022-04-26 03:38:41 +01:00 committed by GitHub
parent 96f6c644bd
commit 29a6c70fc3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 15 additions and 4 deletions

View File

@ -329,10 +329,21 @@ const Layout = ({
)}> )}>
{props.HeadingLeftIcon && <div className="ltr:mr-4">{props.HeadingLeftIcon}</div>} {props.HeadingLeftIcon && <div className="ltr:mr-4">{props.HeadingLeftIcon}</div>}
<div className="mb-8 w-full"> <div className="mb-8 w-full">
<h1 className="font-cal mb-1 text-xl font-bold capitalize tracking-wide text-gray-900"> {props.isLoading ? (
{props.heading} <>
</h1> <div className="mb-1 h-6 w-24 animate-pulse rounded-md bg-gray-200"></div>
<p className="min-h-10 text-sm text-neutral-500 ltr:mr-4 rtl:ml-4">{props.subtitle}</p> <div className="mb-1 h-6 w-32 animate-pulse rounded-md bg-gray-200"></div>
</>
) : (
<>
<h1 className="font-cal mb-1 text-xl font-bold capitalize tracking-wide text-gray-900">
{props.heading}
</h1>
<p className="min-h-10 text-sm text-neutral-500 ltr:mr-4 rtl:ml-4">
{props.subtitle}
</p>
</>
)}
</div> </div>
{props.CTA && <div className="mb-4 flex-shrink-0">{props.CTA}</div>} {props.CTA && <div className="mb-4 flex-shrink-0">{props.CTA}</div>}
</div> </div>