From 13306e6628e86a97c59e2e47583d377f4fa2d83e Mon Sep 17 00:00:00 2001
From: LuisMSuarez <140195810+LuisMSuarez@users.noreply.github.com>
Date: Sat, 25 Oct 2025 16:21:24 -0700
Subject: [PATCH 1/2] Add loading state for summary generation

Introduces a 'generatingSummary' state to display a skeleton loader while the review summary is being generated. Improves user feedback during asynchronous summary creation.
---
 .../src/components/reviews/ReviewList.tsx     | 25 +++++++++++++++----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/components/reviews/ReviewList.tsx b/packages/client/src/components/reviews/ReviewList.tsx
index 87d0fd2..b043b56 100644
--- a/packages/client/src/components/reviews/ReviewList.tsx
+++ b/packages/client/src/components/reviews/ReviewList.tsx
@@ -23,8 +23,14 @@ type GetReviewsResponse = {
    reviews: Review[];
 };
 
+type SummarizeResponse = {
+   summary: string;
+};
+
 const ReviewList = ({ productId }: Props) => {
    const [summaryRegenerated, setSummaryRegenerated] = useState(false);
+   const [generatingSummary, setGeneratingSummary] = useState(false);
+
    const {
       data: reviewData,
       isLoading,
@@ -42,11 +48,16 @@ const ReviewList = ({ productId }: Props) => {
    };
 
    const generateSummary = async () => {
-      const { data } = await axios.post<GetReviewsResponse>(
-         `/api/products/${productId}/summaries`
-      );
-      setSummaryRegenerated(true);
-      return data;
+      setGeneratingSummary(true);
+      try {
+         const { data } = await axios.post<SummarizeResponse>(
+            `/api/products/${productId}/summaries`
+         );
+         setSummaryRegenerated(true);
+         return data;
+      } finally {
+         setGeneratingSummary(false);
+      }
    };
 
    if (isLoading) {
@@ -80,6 +91,10 @@ const ReviewList = ({ productId }: Props) => {
          <div id="summary" className="mb-5">
             {reviewData?.summary ? (
                <p>{reviewData.summary}</p>
+            ) : generatingSummary ? (
+               <div>
+                  <Skeleton count={3} /> {/* Review placeholder (2-liner) */}
+               </div>
             ) : (
                <Button onClick={generateSummary}>
                   <HiSparkles className="text-yellow-400" />

From 9e9c9337b3e1703ee812015547a4b5f15a5608f8 Mon Sep 17 00:00:00 2001
From: LuisMSuarez <140195810+LuisMSuarez@users.noreply.github.com>
Date: Tue, 28 Oct 2025 14:18:02 -0700
Subject: [PATCH 2/2] Refactor review skeleton into separate component

Extracted the review loading skeleton into a new ReviewSkeleton component for better code organization and reusability. Updated ReviewList to use ReviewSkeleton instead of inline skeleton markup.
---
 .../client/src/components/reviews/ReviewList.tsx    | 12 ++++--------
 .../src/components/reviews/ReviewSkeleton.tsx       | 13 +++++++++++++
 2 files changed, 17 insertions(+), 8 deletions(-)
 create mode 100644 packages/client/src/components/reviews/ReviewSkeleton.tsx

diff --git a/packages/client/src/components/reviews/ReviewList.tsx b/packages/client/src/components/reviews/ReviewList.tsx
index b043b56..9734e0a 100644
--- a/packages/client/src/components/reviews/ReviewList.tsx
+++ b/packages/client/src/components/reviews/ReviewList.tsx
@@ -1,10 +1,10 @@
 import axios from 'axios';
-import Skeleton from 'react-loading-skeleton';
 import StarRating from './StarRating';
 import { HiSparkles } from 'react-icons/hi2';
 import { useQuery } from '@tanstack/react-query';
 import { Button } from '../ui/button';
 import { useState } from 'react';
+import ReviewSkeleton from './ReviewSkeleton';
 
 interface Props {
    productId: number;
@@ -64,11 +64,7 @@ const ReviewList = ({ productId }: Props) => {
       return (
          <div className="flex flex-col gap-5">
             {[1, 2, 3].map((placeholder) => (
-               <div key={placeholder}>
-                  <Skeleton width={150} /> {/* User name placeholder */}
-                  <Skeleton width={100} /> {/* Stars placeholder */}
-                  <Skeleton count={2} /> {/* Review placeholder (2-liner) */}
-               </div>
+               <ReviewSkeleton key={placeholder} />
             ))}
          </div>
       );
@@ -93,10 +89,10 @@ const ReviewList = ({ productId }: Props) => {
                <p>{reviewData.summary}</p>
             ) : generatingSummary ? (
                <div>
-                  <Skeleton count={3} /> {/* Review placeholder (2-liner) */}
+                  <ReviewSkeleton />
                </div>
             ) : (
-               <Button onClick={generateSummary}>
+               <Button onClick={generateSummary} className="cursor-pointer">
                   <HiSparkles className="text-yellow-400" />
                   Summarize
                </Button>
diff --git a/packages/client/src/components/reviews/ReviewSkeleton.tsx b/packages/client/src/components/reviews/ReviewSkeleton.tsx
new file mode 100644
index 0000000..448587e
--- /dev/null
+++ b/packages/client/src/components/reviews/ReviewSkeleton.tsx
@@ -0,0 +1,13 @@
+import Skeleton from 'react-loading-skeleton';
+
+const ReviewSkeleton = () => {
+   return (
+      <div>
+         <Skeleton width={150} /> {/* User name placeholder */}
+         <Skeleton width={100} /> {/* Stars placeholder */}
+         <Skeleton count={2} /> {/* Review placeholder (2-liner) */}
+      </div>
+   );
+};
+
+export default ReviewSkeleton;