diff --git a/packages/client/src/components/reviews/ReviewList.tsx b/packages/client/src/components/reviews/ReviewList.tsx
index 87d0fd2..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;
@@ -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,22 +48,23 @@ 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) {
       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>
       );
@@ -80,8 +87,12 @@ const ReviewList = ({ productId }: Props) => {
          <div id="summary" className="mb-5">
             {reviewData?.summary ? (
                <p>{reviewData.summary}</p>
+            ) : generatingSummary ? (
+               <div>
+                  <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;