From d37edde313b330b97e4715b6ed4fa67f890cd08e Mon Sep 17 00:00:00 2001
From: Kazuki Yamada <koukun0120@gmail.com>
Date: Sun, 24 Aug 2025 13:27:12 +0900
Subject: [PATCH] refactor(website): extract loading state into TryItLoading
 component

Separates loading state (spinner + sponsor section) into a dedicated
component to prevent future conflicts:
- Create TryItLoading.vue with loading spinner and Warp sponsor section
- Update TryItResult.vue to use the new loading component
- Remove loading-related CSS from TryItResult.vue
- Improve component separation of concerns

This change isolates sponsor-related updates from core functionality
changes, reducing merge conflicts when sponsor content is updated.
---
 .../client/components/Home/TryItLoading.vue   | 77 +++++++++++++++++++
 .../client/components/Home/TryItResult.vue    | 75 +-----------------
 2 files changed, 79 insertions(+), 73 deletions(-)
 create mode 100644 website/client/components/Home/TryItLoading.vue

diff --git a/website/client/components/Home/TryItLoading.vue b/website/client/components/Home/TryItLoading.vue
new file mode 100644
index 00000000..a13a082c
--- /dev/null
+++ b/website/client/components/Home/TryItLoading.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="loading">
+    <div class="spinner"></div>
+    <p>Processing repository...</p>
+    <div class="sponsor-section">
+      <p class="sponsor-header">Special thanks to:</p>
+      <a href="https://go.warp.dev/repomix" target="_blank" rel="noopener noreferrer">
+        <img alt="Warp sponsorship" width="400" src="https://raw.githubusercontent.com/warpdotdev/brand-assets/main/Github/Sponsor/Warp-Github-LG-01.png">
+      </a>
+      <p class="sponsor-title">
+        <a href="https://go.warp.dev/repomix" target="_blank" rel="noopener noreferrer">
+          Warp, built for coding with multiple AI agents
+        </a>
+      </p>
+      <p class="sponsor-subtitle">
+        <a href="https://go.warp.dev/repomix" target="_blank" rel="noopener noreferrer">
+          Available for MacOS, Linux, & Windows
+        </a>
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.loading {
+  padding: 36px;
+  text-align: center;
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  margin: 0 auto 16px;
+  border: 3px solid var(--vp-c-brand-1);
+  border-radius: 50%;
+  border-top-color: transparent;
+  animation: spin 1s linear infinite;
+}
+
+.sponsor-section {
+  margin-top: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.sponsor-section p {
+  margin: 8px 0;
+}
+
+.sponsor-section .sponsor-header {
+  font-size: 0.9em;
+}
+
+.sponsor-section img {
+  max-width: 100%;
+  height: auto;
+  margin: 12px 0;
+}
+
+.sponsor-section .sponsor-title {
+  font-weight: bold;
+  font-size: 1.1em;
+  color: var(--vp-c-brand-1);
+  text-decoration: underline;
+}
+
+.sponsor-section .sponsor-subtitle {
+  font-size: 0.9em;
+  color: var(--vp-c-brand-1);
+  text-decoration: underline;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+</style>
\ No newline at end of file
diff --git a/website/client/components/Home/TryItResult.vue b/website/client/components/Home/TryItResult.vue
index fa5228ec..32d287a5 100644
--- a/website/client/components/Home/TryItResult.vue
+++ b/website/client/components/Home/TryItResult.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { FileInfo, PackResult } from '../api/client';
 import TryItFileSelection from './TryItFileSelection.vue';
+import TryItLoading from './TryItLoading.vue';
 import TryItResultContent from './TryItResultContent.vue';
 import TryItResultErrorContent from './TryItResultErrorContent.vue';
 
@@ -25,26 +26,7 @@ const handleRepack = (selectedFiles: FileInfo[]) => {
 
 <template>
   <div class="result-viewer">
-    <div v-if="loading" class="loading">
-      <div class="spinner"></div>
-      <p>Processing repository...</p>
-      <div class="sponsor-section">
-        <p class="sponsor-header">Special thanks to:</p>
-        <a href="https://go.warp.dev/repomix" target="_blank" rel="noopener noreferrer">
-          <img alt="Warp sponsorship" width="400" src="https://raw.githubusercontent.com/warpdotdev/brand-assets/main/Github/Sponsor/Warp-Github-LG-01.png">
-        </a>
-        <p class="sponsor-title">
-          <a href="https://go.warp.dev/repomix" target="_blank" rel="noopener noreferrer">
-            Warp, built for coding with multiple AI agents
-          </a>
-        </p>
-        <p class="sponsor-subtitle">
-          <a href="https://go.warp.dev/repomix" target="_blank" rel="noopener noreferrer">
-            Available for MacOS, Linux, & Windows
-          </a>
-        </p>
-      </div>
-    </div>
+    <TryItLoading v-if="loading" />
     <TryItResultErrorContent
       v-else-if="error"
       :message="error"
@@ -71,57 +53,4 @@ const handleRepack = (selectedFiles: FileInfo[]) => {
   overflow: hidden;
 }
 
-.loading {
-  padding: 36px;
-  text-align: center;
-}
-
-.spinner {
-  width: 40px;
-  height: 40px;
-  margin: 0 auto 16px;
-  border: 3px solid var(--vp-c-brand-1);
-  border-radius: 50%;
-  border-top-color: transparent;
-  animation: spin 1s linear infinite;
-}
-
-.sponsor-section {
-  margin-top: 16px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.sponsor-section p {
-  margin: 8px 0;
-}
-
-.sponsor-section .sponsor-header {
-  font-size: 0.9em;
-}
-
-.sponsor-section img {
-  max-width: 100%;
-  height: auto;
-  margin: 12px 0;
-}
-
-.sponsor-section .sponsor-title {
-  font-weight: bold;
-  font-size: 1.1em;
-  color: var(--vp-c-brand-1);
-  text-decoration: underline;
-}
-
-.sponsor-section .sponsor-subtitle {
-  font-size: 0.9em;
-  color: var(--vp-c-brand-1);
-  text-decoration: underline;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-
-}
 </style>