Improve carousel transitions and image loading for a smoother user experience

Implement fade transitions for carousel image changes and preload next images to prevent page flashing on mobile. Update Dropbox token and gallery image URLs.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: a8b6bc05-ce3f-463c-aa77-b87d069f3637
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/EtK2Sno
Replit-Helium-Checkpoint-Created: true

client/src/pages/home.tsx

@@ -398,25 +398,54 @@ function FeaturedCarousel({ articles, popular, galleryImages, focalPoints }: { a
   const pageSize = 3;
   const totalPages = Math.max(1, Math.ceil(Math.min(articles.length, 9) / pageSize));
   const [page, setPage] = useState(0);
+  const [displayPage, setDisplayPage] = useState(0);
+  const [fading, setFading] = useState(false);
   const [paused, setPaused] = useState(false);
 
+  const changePage = useCallback((newPage: number) => {
+    if (newPage === displayPage) return;
+    setFading(true);
+    setTimeout(() => {
+      setDisplayPage(newPage);
+      setFading(false);
+    }, 300);
+  }, [displayPage]);
+
   const next = useCallback(() => {
-    setPage((p) => (p + 1) % totalPages);
+    setPage((p) => {
+      const np = (p + 1) % totalPages;
+      return np;
+    });
   }, [totalPages]);
 
+  useEffect(() => {
+    changePage(page);
+  }, [page]);
+
   useEffect(() => {
     if (paused || totalPages <= 1) return;
     const timer = setInterval(next, 8000);
     return () => clearInterval(timer);
   }, [paused, next, totalPages]);
 
-  const start = page * pageSize;
+  const start = displayPage * pageSize;
   const hero = articles[start];
   const sideCards = articles.slice(start + 1, start + 3);
 
+  const nextPageStart = ((displayPage + 1) % totalPages) * pageSize;
+  const nextPageArticles = articles.slice(nextPageStart, nextPageStart + pageSize);
+
   return (
     <section data-testid="featured-carousel" onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}>
-      <div className="grid grid-cols-1 lg:grid-cols-5 gap-4">
+      {nextPageArticles.length > 0 && (
+        <div className="hidden" aria-hidden="true">
+          {nextPageArticles.map((a) => a.coverImage && <img key={`preload-${a.id}`} src={a.coverImage} alt="" />)}
+        </div>
+      )}
+      <div
+        className="grid grid-cols-1 lg:grid-cols-5 gap-4 transition-opacity duration-300"
+        style={{ opacity: fading ? 0 : 1 }}
+      >
         <div className="lg:col-span-3">
           {hero && <FeaturedHeroCard article={hero} focalPoints={focalPoints} />}
         </div>

server/dropbox-token.json

@@ -1,7 +1,7 @@
 {
-  "access_token": "sl.u.AGUsjSGJyMKxPxG4dTh794VQ710TJlRyfGzVDPqD07CbZrqpOwJgBwBZLIni924ibCdEKerUVZW5vlnF847H7LriYC6p6TibnWzaTS3YgPNkT72U-6Au-DIXLkZO-P9x-IGRIKCslqFUYeBAqZMv4amSHy__OcWlTu6Xus6I-tRvyjbBr8DNGWtkOhVw8ggxffUu5gmAZPuGmr1DF8e15DtgW3rj8qfHcAbLRM3Zhb6CqzW8ngI4SCGpZY9fBY75jZZWHDMxg6ttpM2coG4qGxA8ZZvJvX_7XsnzS-aOnFdeP7usYgU5NC_e2dbS_ieF_IFNa3Xw-13buw8hBo6g92m0DG3mIaC9E4vsUUH5kTwRbZa3ZAerdTEDgarYHn7naWnNT5SCjUhwArneuzGfqoWFHHCS4pF9RXXRhSG472Z4ZdBnDzs0R7XkxVoZPtIH2zik6g4no-B8mha5pjFWwxDFESsnwMHBHEbGSul7SHPE8JL9H7HQek4tdXgJvwijMyhJb4siJZCzXDia-cjvZDgEuyQ-YYokbTprlfHazi2jER0w8QfJdwyTotM79P7GfpLihDtw8ezrp_8Q69e8uw5L2CG0EP1axKP69Q3w18vJ0Cd4O5sSWJM3DK3SxL8tbCRfZax7MNKpEi5AidCkUVt72PDUkqqyfsRf-0HVpqm5ZWkwWqi-A9ThLHm1nCr-gLUJbKeZlZtAGZlPY-9z1hQmQa1FxDqO8mq-qMWQVC8mjiv5-igsgHR4WSq2ELavjl3O01xzRifDXFOJu0Rz7oDPWElCtJZ5osFcuVDlK25pyao0cdxl7J_2noPlpJMKvLUzTgKV3Q5nWhtQZfuO3AA3IaFCvpjyx7egkenhLiRgdtBFm8s0ZS--RwtqdG2UQguVUwalWE-3ZF-3nsCFJtqEVD3G2SQKLJSJeISz1vybhRYJB71reAThJPZTkg4g7Zpae3LHn185hJ-vwgufZe4jEL2YOqaxlnbFlyfEJht0sksmBCJmMeok9-jcwG3CItAo7yISIwhHqU_v0Ji6g-QJMEudtvmWRd0y5ddPIGF2yMFQtEGOalMgEM5au1ilbpaHKgkndmckJxXQGtTz57zKCuQvWwdAiwM3CvhEgYSau87YZcJKQN_5Bm3vdAFOVQOtax_fJ5INznxJt4NFfeVEaY92r8ERDU85_LIlg5YtUIG9Nt-UcXmS3MNXKADxTPFWHbxfXCbm13xsDlsC5EIMag8ar_4ZUE50bJqlKF86ZmsScpTZYdBRVd4BgV_mAdECBLtcIeWpuiI-lK3XCrHz6MW3jo0SwEahAeFu1_ZJIQ",
+  "access_token": "sl.u.AGW5qKGBU3tAvpP1D2nq7yW9QKqc-Wu6G54QBGvg-B42dzG6ADiOY3tCq9-gn6hDq6-GhpueN4ZoOMmYp6uj9kbsSvLIeSqVGupc5p9jc31mXu5DfG9fHiao_XoLOR67wst12uSjelNqsO9EXbHt5J5tgKxvGtD5xrFFy5C5GzGvwCkJat9bKOxhJ6g2ZAHGseVj4nWQqo4UMxvcLLDqGVE5rx0I69-d1z2IHCmcdrTrcJ1ph3SQWDIDAWPi2lFE_qyj822oN6NdChMqGCEiTaNDM-AjOMKm7HEPUb2H95N-fWBjf3sF4rXBmY9deNNj581xWmdKaOkTzH4pd6PKobf_PNhdgqtTUx6Xtew0OnjGumohEjD8Y8YW2s_GEQM4JYxJmdsHSRbtO1yyY5I0riOphFy04gmDotz01p9QnIUgn6JKxyUHKQnPf4E7WTNNlg7yYBTqM6XkyqxVXMnsEfDbeGQ-JnsTtGMk6BcNkuk7B7JOP-GNstHmsFwlBygTIxLiRvxcBUESfjy2V-QUvbIMl4vwevNVYuAZ4IQBQGCwaybijnQkpYthDnDGMU8vT5q63OLj2gRCC_BHbGZZcyPW2t0NYUHO6K_enCGPvzE7oI7u44xd6U4slaqYp4t_gDvaM8fInydoSyC1xWwzNCuocP3i5fHJ25pwaU0R3fV2tLvSWYPzO94KtbVJUOn4jutYn-xgEi63ya2iS9jBA813b1TgJIRjefsP_93pO-iJLKm2DUSoEnNPz3F43lbdM0S8HbGgD0AHHJ9_DFFxYf_SarGZjPepLs21Tb8-flojSVpqFIBgLdu2qRHYQcZbE8q1tkOkviZUowvEIu4lI0nVXEUMiOxg_HyeoAmSxZE82AVOd5grtdX7vrbAFlsOEAzXP5NQWlfg4-8SHlU6Ujla_qMci23ZLEewjeH17L32F90NwXug2ChGY2bROFi51Ma8ZRp2u9_hCvUYSI9K628nyft9XK9kvbT4UL6rWPNfoezlRBI_nrdG66QjIhIfkIG6lFQPEDGIeofJd4CDDDFMw_sHRc1uvOpwwPUoA1Zx1t1TY2JzOIMn8jUS_WCa1SR8CLaO-Dj5cgNmnAy6KTpB-i7tkbg7Q3hga1DmhBwDDs9DsJ6pD8S4-99XriolTFmg1ISxCEEPU_ZrtlaxvKmI3Fvtd2eOJBi4CbnyalJS9DrVrYdHC8SQXcs6NkHDTsil3j81SbTw6PtOaqP0gSrnmVr_56O2X7g3qrs7BHENoaYR2ZF7lVRAlObUtHQGWLL609WdtV7ci2Y0k44CyDIUjV0ZeluRZxaGS3YmeemRCQ",
   "refresh_token": "8-fiK0Io8Z8AAAAAAAAAAXn1QIGTwFTVWKF47COXY2bjqYlWyd4aRnFtQJ7usZ0y",
-  "expires_at": 1772661635000,
+  "expires_at": 1772702693199,
   "app_key": "sjwprgka82p8tpv",
   "app_secret": "g3vuczqo0rx3crz"
 }