Improve page load times and rendering

app/components/sections/QuoteBlock/QuoteBlock.container.tsx

@@ -21,7 +21,6 @@ const QuoteBlockContainer = memo<QuoteBlockProps>(
     onError,
   }) => {
     const [imageError, setImageError] = useState(false);
-    const [imageLoading, setImageLoading] = useState(true);
 
     // Variant configurations
     const variants: Record<string, VariantConfig> = {
@@ -97,16 +96,13 @@ const QuoteBlockContainer = memo<QuoteBlockProps>(
     const quoteId = `${baseId}-content`;
     const authorId = `${baseId}-author`;
 
-    // Error handling functions
     const handleImageError = (error: unknown) => {
       logger.warn(
         `QuoteBlock: Failed to load avatar image for ${author}:`,
         error,
       );
       setImageError(true);
-      setImageLoading(false);
 
-      // Call error callback if provided
       if (onError) {
         onError({
           type: "image_load_error",
@@ -118,11 +114,6 @@ const QuoteBlockContainer = memo<QuoteBlockProps>(
       }
     };
 
-    const handleImageLoad = () => {
-      setImageLoading(false);
-      setImageError(false);
-    };
-
     // Validate required props
     if (variantProp === "statement") {
       if (!quote?.trim() || !quoteSecondary?.trim()) {
@@ -166,9 +157,7 @@ const QuoteBlockContainer = memo<QuoteBlockProps>(
         authorId={authorId}
         config={config}
         imageError={imageError}
-        imageLoading={imageLoading}
         currentAvatarSrc={currentAvatarSrc}
-        onImageLoad={handleImageLoad}
         onImageError={handleImageError}
       />
     );

app/components/sections/QuoteBlock/QuoteBlock.types.ts

@@ -52,8 +52,6 @@ export interface QuoteBlockViewProps {
   authorId: string;
   config: VariantConfig;
   imageError: boolean;
-  imageLoading: boolean;
   currentAvatarSrc: string;
-  onImageLoad: () => void;
   onImageError: (_error: unknown) => void;
 }

app/components/sections/QuoteBlock/QuoteBlock.view.tsx

@@ -17,9 +17,7 @@ function QuoteBlockView({
   authorId,
   config,
   imageError,
-  imageLoading,
   currentAvatarSrc,
-  onImageLoad,
   onImageError,
 }: QuoteBlockViewProps) {
   const t = useTranslation("quoteBlock");
@@ -89,7 +87,6 @@ function QuoteBlockView({
 
         <div className={`flex flex-col ${config.gap} relative z-10`}>
           <div className={`flex flex-col ${config.avatarGap}`}>
-            {/* Avatar with error handling */}
             <div className="relative">
               {!imageError ? (
                 <Image
@@ -97,26 +94,12 @@ function QuoteBlockView({
                   alt={avatarAlt}
                   width={64}
                   height={64}
-                  className={`filter sepia ${
-                    config.avatar
-                  } transition-opacity duration-300 ${
-                    imageLoading ? "opacity-0" : "opacity-100"
-                  }`}
-                  loading="lazy"
+                  className={`filter sepia ${config.avatar}`}
+                  loading="eager"
+                  priority
                   onError={onImageError}
-                  onLoad={onImageLoad}
                 />
-              ) : null}
-
-              {/* Loading state */}
-              {imageLoading && !imageError && (
-                <div
-                  className={`absolute inset-0 bg-gray-200 animate-pulse rounded-full ${config.avatar}`}
-                />
-              )}
-
-              {/* Error state - show initials */}
-              {imageError && (
+              ) : (
                 <div
                   className={`flex items-center justify-center bg-gray-300 rounded-full ${config.avatar} text-gray-600 font-bold`}
                 >

app/components/sections/RuleStack/RuleStack.container.tsx

@@ -8,7 +8,7 @@ import { memo, useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import { useTranslation } from "../../../contexts/MessagesContext";
 import { logger } from "../../../../lib/logger";
-import { prepareFreshCreateFlowEntry } from "../../../(app)/create/utils/prepareFreshCreateFlowEntry";
+import { prepareFreshCreateFlowEntrySync } from "../../../(app)/create/utils/prepareFreshCreateFlowEntry";
 import {
   fetchTemplates,
   isTemplatesFetchAborted,
@@ -99,10 +99,8 @@ const RuleStackContainer = memo<RuleStackProps>(
     logger.debug(`${slug} template clicked`);
     // Marketing home “Popular templates”: same fresh start as Top “Create rule”
     // (local + server draft when sync) so stale state cannot break template apply.
-    void (async () => {
-      await prepareFreshCreateFlowEntry();
-      router.push(`/create/review-template/${encodeURIComponent(slug)}`);
-    })();
+    prepareFreshCreateFlowEntrySync();
+    router.push(`/create/review-template/${encodeURIComponent(slug)}`);
   };
 
   return (