From 6f0dc49b9e04e6c16b8b0ad061836bf786e7416c Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Thu, 20 Mar 2025 00:06:59 -0500
Subject: [PATCH] Minimize layout shift for new users

---
 src/admin/SignInOrUploadClient.tsx |  1 +
 src/photo/PhotosEmptyState.tsx     | 79 ++++++++++++++++--------------
 2 files changed, 44 insertions(+), 36 deletions(-)

diff --git a/src/admin/SignInOrUploadClient.tsx b/src/admin/SignInOrUploadClient.tsx
index 3ff37283..d6a04e31 100644
--- a/src/admin/SignInOrUploadClient.tsx
+++ b/src/admin/SignInOrUploadClient.tsx
@@ -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
diff --git a/src/photo/PhotosEmptyState.tsx b/src/photo/PhotosEmptyState.tsx
index d2cfea26..97c10bce 100644
--- a/src/photo/PhotosEmptyState.tsx
+++ b/src/photo/PhotosEmptyState.tsx
@@ -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>,
+          ]}
+        />
+      }
     />
   );
 };