strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Minimize layout shift for new users

Browse Source
This commit is contained in:
Sam Becker 2025-03-20 00:06:59 -05:00
parent fd22877580
commit 6f0dc49b9e
2 changed files with 44 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/admin/SignInOrUploadClient.tsx
View File

@ -17,6 +17,7 @@ export default function SignInOrUploadClient({
return (
<div className={clsx(
'flex justify-center items-center flex-col gap-4',
'min-h-[4.5rem]',
)}>
<div>
{isCheckingAuth

79
src/photo/PhotosEmptyState.tsx
View File

@ -8,49 +8,56 @@ import { revalidatePath } from 'next/cache';
import SignInOrUploadClient from '@/admin/SignInOrUploadClient';
import Link from 'next/link';
import { PATH_ADMIN_CONFIGURATION } from '@/app/paths';
import AnimateItems from '@/components/AnimateItems';
export default function PhotosEmptyState() {
return (
<SiteGrid
contentMain={
<Container
className="min-h-[20rem] sm:min-h-[30rem] px-8"
padding="loose"
>
<HiOutlinePhotograph
className="text-medium"
size={24}
/>
<div className={clsx(
'font-bold text-2xl',
'text-gray-700 dark:text-gray-200',
)}>
{!IS_SITE_READY ? 'Finish Setup' : 'Setup Complete!'}
</div>
{!IS_SITE_READY
? <AdminAppConfiguration simplifiedView />
: <div className="max-w-md text-center space-y-6">
<SignInOrUploadClient
shouldResize={!PRESERVE_ORIGINAL_UPLOADS}
onLastUpload={async () => {
'use server';
// Update upload count in admin nav
revalidatePath('/admin', 'layout');
}}
<AnimateItems
items={[
<Container
key="PhotosEmptyState"
className="min-h-[20rem] sm:min-h-[30rem] px-8"
padding="loose"
>
<HiOutlinePhotograph
className="text-medium"
size={24}
/>
<div>
Change this site&apos;s name and other configuration
by editing environment variables referenced in
{' '}
<Link
href={PATH_ADMIN_CONFIGURATION}
className="text-main hover:underline"
>
/admin/configuration
</Link>
<div className={clsx(
'font-bold text-2xl',
'text-gray-700 dark:text-gray-200',
)}>
{!IS_SITE_READY ? 'Finish Setup' : 'Setup Complete!'}
</div>
</div>}
</Container>}
{!IS_SITE_READY
? <AdminAppConfiguration simplifiedView />
: <div className="max-w-md text-center space-y-6">
<SignInOrUploadClient
shouldResize={!PRESERVE_ORIGINAL_UPLOADS}
onLastUpload={async () => {
'use server';
// Update upload count in admin nav
revalidatePath('/admin', 'layout');
}}
/>
<div>
Change this site&apos;s name and other configuration
by editing environment variables referenced in
{' '}
<Link
href={PATH_ADMIN_CONFIGURATION}
className="text-main hover:underline"
>
/admin/configuration
</Link>
</div>
</div>}
</Container>,
]}
/>
}
/>
);
};