feat: AI commentary skeleton loading - separate async endpoint

src/components/matches/match-detail-content.tsx

@@ -20,7 +20,7 @@ import { useState } from "react";
 import { useColorModeValue } from "@/components/ui/color-mode";
 import { SlideUp, FadeIn } from "@/components/motion";
 import { useMatchDetails } from "@/lib/api/matches/use-hooks";
-import { usePrediction } from "@/lib/api/predictions/use-hooks";
+import { usePrediction, useAiCommentary } from "@/lib/api/predictions/use-hooks";
 import { useGetMe } from "@/lib/api/users/use-hooks";
 import { useQueryClient } from "@tanstack/react-query";
 import { UsersQueryKeys } from "@/lib/api/users/use-hooks";
@@ -32,6 +32,7 @@ import {
   LuRefreshCw,
   LuUser,
   LuSparkles,
+  LuBrain,
   LuInfo,
   LuChevronDown,
   LuChevronUp,
@@ -142,6 +143,11 @@ export default function MatchDetailContent() {
     isFetching: isPredFetching,
   } = usePrediction(matchId);
 
+  const { data: commentaryData, isLoading: commentaryLoading } = useAiCommentary(
+    matchId,
+    !!predictionData?.data, // prediction yüklendikten sonra başlat
+  );
+
   const [officialsOpen, setOfficialsOpen] = useState(false);
   const [activeTab, setActiveTab] = useState<string>("all");
 
@@ -762,7 +768,33 @@ export default function MatchDetailContent() {
               <Skeleton h="80px" borderRadius="xl" />
             </VStack>
           ) : prediction ? (
-            <PredictionCard prediction={prediction} />
+            <>
+              <PredictionCard prediction={prediction} />
+              {/* AI Uzman Yorumu — prediction yüklendikten sonra ayrıca çekiliyor */}
+              <Card.Root bg={cardBg} borderColor={borderColor} borderRadius="2xl">
+                <Card.Body gap={3}>
+                  <Flex align="center" gap={2}>
+                    <LuBrain size={16} />
+                    <Text fontWeight="semibold" fontSize="sm">AI Uzman Yorumu</Text>
+                  </Flex>
+                  {commentaryLoading ? (
+                    <VStack align="stretch" gap={2}>
+                      <Skeleton h="16px" borderRadius="md" />
+                      <Skeleton h="16px" borderRadius="md" w="90%" />
+                      <Skeleton h="16px" borderRadius="md" w="75%" />
+                    </VStack>
+                  ) : commentaryData?.data?.commentary ? (
+                    <Text fontSize="sm" color="fg.muted" lineHeight="1.7">
+                      {commentaryData.data.commentary}
+                    </Text>
+                  ) : (
+                    <Text fontSize="sm" color="fg.subtle">
+                      Yorum üretilemedi.
+                    </Text>
+                  )}
+                </Card.Body>
+              </Card.Root>
+            </>
           ) : (
             <Card.Root borderColor={borderColor} borderRadius="xl">
               <Card.Body>

src/components/matches/prediction-card.tsx

@@ -1627,23 +1627,6 @@ export default function PredictionCard({ prediction }: PredictionCardProps) {
         )}
         ui={ui}
       />
-      {(prediction as unknown as Record<string, unknown>).ai_expert_commentary ? (
-        <Card.Root bg={cardBg} borderColor={borderColor} borderRadius="2xl">
-          <Card.Body gap={3}>
-            <SectionTitle
-              icon={LuBrain}
-              title={uiText("ai-expert-commentary-title", "AI Uzman Yorumu")}
-              info={uiText(
-                "ai-expert-commentary-info",
-                "Yapay zekanın maç verilerini okuyarak ürettiği uzman bahis analizi.",
-              )}
-            />
-            <Text fontSize="sm" color="fg.muted" lineHeight="1.7">
-              {String((prediction as unknown as Record<string, unknown>).ai_expert_commentary)}
-            </Text>
-          </Card.Body>
-        </Card.Root>
-      ) : null}
       {prediction.match_commentary?.headline ||
       prediction.match_commentary?.summary ? (
         <Card.Root bg={cardBg} borderColor={borderColor} borderRadius="2xl">