important commit, fix hero image flicker, add fixed blur delay 200ms, update zod types somewhat

Author: nemanjam

docs/working-notes/todo4.md

@@ -184,6 +184,9 @@ clean comments for astro jsx
 <!-- Mobile Web App -->
 https://github.com/benavlabs/landstro
 
+------------
+update Zod code
+astro zod v3, main zod v4
 ```
 
 

src/components/react/ImageBlurPreloader.tsx

@@ -1,11 +1,15 @@
 import { useEffect, useState } from 'react';
 
+import useDelayed from '@/components/react/hooks/useDelayed';
 import usePrevious from '@/components/react/hooks/usePrevious';
+import { CONFIG_CLIENT } from '@/config/client';
 import { cn } from '@/utils/styles';
 
 import type { ImgTagAttributes } from '@/types/image';
 import type { FC } from 'react';
 
+const { BLUR_IMAGE_DELAY } = CONFIG_CLIENT;
+
 interface Props {
   blurAttributes: ImgTagAttributes;
   mainAttributes: ImgTagAttributes;
@@ -28,18 +32,21 @@ const ImageBlurPreloader: FC<Props> = ({
 
   const prevMainAttributes = usePrevious(mainAttributes);
 
-  const isNewImage = !(
+  // track transition to new image
+  const isMainImageChanged = !(
     prevMainAttributes?.src === mainAttributes.src &&
     prevMainAttributes.srcSet === mainAttributes.srcSet
   );
 
+  const isDelayedBlur = useDelayed(isMainImageChanged, BLUR_IMAGE_DELAY);
+
   // reset isLoading on main image change
   useEffect(() => {
-    if (isNewImage) {
+    if (isMainImageChanged) {
       setIsLoadingBlur(true);
       setIsLoadingMain(true);
     }
-  }, [isNewImage, setIsLoadingMain, setIsLoadingBlur]);
+  }, [isMainImageChanged, setIsLoadingMain, setIsLoadingBlur]);
 
   // important: main image must be in DOM for onLoad to work
   // unmount and display: none will fail
@@ -63,10 +70,6 @@ const ImageBlurPreloader: FC<Props> = ({
       : blurAttributes.src || blurAttributes.srcSet
   );
 
-  // Todo: cant use opacity for control, must use 2 <img /> tags
-  // incomingMain, currentMain states, and assign key for unmount
-  // https://chatgpt.com/s/t_689754f4fbf8819181ad44b5f3a0bbd7
-
   return (
     <div className={cn('relative size-full', divClassName)}>
       {hasImage && (
@@ -88,8 +91,13 @@ const ImageBlurPreloader: FC<Props> = ({
             onLoad={handleLoadMain}
             className={cn(
               'object-cover absolute top-0 left-0 size-full',
-              // important: dont hide main image until next blur image is loaded
-              isLoadingMain && !isLoadingBlur ? 'opacity-0' : 'opacity-100',
+              // important:
+              // _!isLoadingBlur - don't hide main image until next blur image is loaded
+              // isMainImageChanged - don't show main image while it's transitioning - solves flickering
+              // isDelayedBlur - fixed blur delay
+              !isLoadingBlur && (isLoadingMain || isMainImageChanged || isDelayedBlur)
+                ? 'opacity-0'
+                : 'opacity-100',
               className
             )}
           />

src/components/react/hooks/useDelayed.tsx

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+
+const useDelayed = (tracked: boolean, delayMs: number) => {
+  const [delayed, setDelayed] = useState(false);
+
+  useEffect(() => {
+    if (!tracked) {
+      // No delay, set immediately
+      if (delayMs === 0) {
+        setDelayed(false);
+        return;
+      }
+
+      setDelayed(true);
+
+      const timeout = setTimeout(() => {
+        setDelayed(false);
+      }, delayMs);
+
+      return () => clearTimeout(timeout);
+    }
+  }, [tracked, delayMs]);
+
+  return delayed;
+};
+
+export default useDelayed;

src/config/client.ts

@@ -18,6 +18,7 @@ const configClientData: ConfigClientType = {
   PAGE_SIZE_POST_CARD_SMALL: 6,
   PAGE_SIZE_PROJECT_CARD: 6,
   MORE_POSTS_COUNT: 3,
+  BLUR_IMAGE_DELAY: 200,
   DEFAULT_MODE: 'light',
   DEFAULT_THEME: 'default-light',
   AUTHOR_NAME: 'Nemanja Mitic',

src/schemas/config.ts

@@ -15,10 +15,10 @@ export const processEnvSchema = z.object({
   PREVIEW_MODE: z
     .enum(booleanValues)
     .transform((value) => value === 'true')
-    .default('false'),
+    .default(false),
   // ensure no trailing slash
-  SITE_URL: z.string().url().regex(/[^/]$/, 'SITE_URL should not end with a slash "/"'),
-  PLAUSIBLE_SCRIPT_URL: z.string().url().or(z.literal('')).optional(),
+  SITE_URL: z.url().regex(/[^/]$/, 'SITE_URL should not end with a slash "/"'),
+  PLAUSIBLE_SCRIPT_URL: z.url().or(z.literal('')).optional(),
   PLAUSIBLE_DOMAIN: z
     .string()
     .or(z.enum(['', 'localhost'])) // for types
@@ -30,7 +30,7 @@ export const processEnvSchema = z.object({
         value === '' ||
         value === 'localhost' || // astro:env default
         domainSubdomainRegex.test(value),
-      (value) => ({ message: `Invalid hostname for PLAUSIBLE_DOMAIN 1: ${value}` })
+      { message: 'Invalid hostname for PLAUSIBLE_DOMAIN 1' }
     ),
 });
 
@@ -40,23 +40,22 @@ export const configServerSchema = processEnvSchema
 
 export const configClientSchema = processEnvSchema
   .pick({ SITE_URL: true, PLAUSIBLE_SCRIPT_URL: true, PLAUSIBLE_DOMAIN: true })
-  .merge(
-    z.object({
-      SITE_URL_CANONICAL: z.string().min(1),
-      SITE_TITLE: z.string().min(1),
-      SITE_DESCRIPTION: z.string().min(1),
-      PAGE_SIZE_POST_CARD: z.number(),
-      PAGE_SIZE_POST_CARD_SMALL: z.number(),
-      PAGE_SIZE_PROJECT_CARD: z.number(),
-      MORE_POSTS_COUNT: z.number(),
-      DEFAULT_MODE: z.enum(modeValues), // check that theme and mode match
-      DEFAULT_THEME: z.enum(themeValues),
-      AUTHOR_NAME: z.string().min(1),
-      AUTHOR_EMAIL: z.string().email(),
-      AUTHOR_GITHUB: z.string().url(),
-      AUTHOR_LINKEDIN: z.string().url(),
-      AUTHOR_TWITTER: z.string().url(),
-      AUTHOR_YOUTUBE: z.string().url(),
-      REPO_URL: z.string().url(),
-    })
-  );
+  .extend({
+    SITE_URL_CANONICAL: z.string().min(1),
+    SITE_TITLE: z.string().min(1),
+    SITE_DESCRIPTION: z.string().min(1),
+    PAGE_SIZE_POST_CARD: z.number(),
+    PAGE_SIZE_POST_CARD_SMALL: z.number(),
+    PAGE_SIZE_PROJECT_CARD: z.number(),
+    MORE_POSTS_COUNT: z.number(),
+    BLUR_IMAGE_DELAY: z.number(),
+    DEFAULT_MODE: z.enum(modeValues), // check that theme and mode match
+    DEFAULT_THEME: z.enum(themeValues),
+    AUTHOR_NAME: z.string().min(1),
+    AUTHOR_EMAIL: z.email(),
+    AUTHOR_GITHUB: z.url(),
+    AUTHOR_LINKEDIN: z.url(),
+    AUTHOR_TWITTER: z.url(),
+    AUTHOR_YOUTUBE: z.url(),
+    REPO_URL: z.url(),
+  });

src/utils/validation.ts

@@ -1,12 +1,14 @@
 import { z } from 'zod';
 
-import type { ZodSchema } from 'zod';
+import type { ZodError, ZodType } from 'zod';
 
-export const zodErrorToString = (error: z.ZodError): string => {
-  return error.errors.map((err: z.ZodIssue) => `${err.path.join('.')}: ${err.message}`).join(', ');
+export const zodErrorToString = (error: ZodError): string => {
+  return error.issues
+    .map((err: z.core.$ZodIssue) => `${err.path.join('.')}: ${err.message}`)
+    .join(', ');
 };
 
-export const validateData = <T extends ZodSchema>(config: z.infer<T>, schema: T): z.infer<T> => {
+export const validateData = <T extends ZodType>(config: z.infer<T>, schema: T): z.infer<T> => {
   const parsedConfig = schema.safeParse(config);
 
   if (!parsedConfig.success) {