From cc4198703cdb7dbea6c3fb6fa8695b134ce2b07d Mon Sep 17 00:00:00 2001
From: Shu Uesugi <shu.chibicode@gmail.com>
Date: Tue, 14 Jan 2025 12:01:40 -0800
Subject: [PATCH] [vercel-tutor] Move files / add loading indicator (#1043)

### Description

- Rename files from `<step-name>/page.tsx` to `<step-name>.tsx` to
prevent them from being built
- Add simple loading states to links


https://github.com/user-attachments/assets/251f8dd3-7a04-4a33-9862-5d4266145a47


https://github.com/user-attachments/assets/998c9a36-8af3-4bb6-8951-f50f9ccc8802

### Type of Change

- [ ] New Example
- [x] Example updates (Bug fixes, new features, etc.)
- [ ] Other (changes to the codebase, but not to examples)
---
 .../app/{helpful-links/page.tsx => helpful-links.tsx}  |  0
 vercel-tutor/app/page.tsx                              | 10 +++++++++-
 .../page.tsx => smaller-triangle.tsx}                  | 10 +++++++++-
 vercel-tutor/steps.json                                |  6 +++---
 4 files changed, 21 insertions(+), 5 deletions(-)
 rename vercel-tutor/app/{helpful-links/page.tsx => helpful-links.tsx} (100%)
 rename vercel-tutor/app/{smaller-triangle/page.tsx => smaller-triangle.tsx} (94%)

diff --git a/vercel-tutor/app/helpful-links/page.tsx b/vercel-tutor/app/helpful-links.tsx
similarity index 100%
rename from vercel-tutor/app/helpful-links/page.tsx
rename to vercel-tutor/app/helpful-links.tsx
diff --git a/vercel-tutor/app/page.tsx b/vercel-tutor/app/page.tsx
index a1af4890ef..cdef4d748c 100644
--- a/vercel-tutor/app/page.tsx
+++ b/vercel-tutor/app/page.tsx
@@ -27,6 +27,7 @@ function Circle() {
 
 export default function Home() {
   const [nextUrl, setNextUrl] = useState("#");
+  const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
     const host = window.location.hostname;
@@ -74,8 +75,15 @@ export default function Home() {
           <a
             className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground font-medium text-background hover:bg-[#383838] dark:hover:bg-[#ccc] h-12 font-[family-name:var(--font-geist-sans)]"
             href={nextUrl}
+            onClick={(e) => {
+              if (isLoading) {
+                e.preventDefault();
+              } else {
+                setIsLoading(true);
+              }
+            }}
           >
-            View Pull Request
+            {isLoading ? 'Loading…' : 'View Pull Request'}
           </a>
           <a
             className="font-[family-name:var(--font-geist-sans)] text-secondary hover:underline flex items-center justify-center h-12 font-medium"
diff --git a/vercel-tutor/app/smaller-triangle/page.tsx b/vercel-tutor/app/smaller-triangle.tsx
similarity index 94%
rename from vercel-tutor/app/smaller-triangle/page.tsx
rename to vercel-tutor/app/smaller-triangle.tsx
index f2d28160f8..c52f0292d2 100644
--- a/vercel-tutor/app/smaller-triangle/page.tsx
+++ b/vercel-tutor/app/smaller-triangle.tsx
@@ -47,6 +47,7 @@ function Check() {
 
 export default function Home() {
   const [nextUrl, setNextUrl] = useState("#");
+  const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
     const host = window.location.hostname;
@@ -119,8 +120,15 @@ export default function Home() {
           <a
             className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground font-medium text-background hover:bg-[#383838] dark:hover:bg-[#ccc] h-12 font-[family-name:var(--font-geist-sans)]"
             href={nextUrl}
+            onClick={(e) => {
+              if (isLoading) {
+                e.preventDefault();
+              } else {
+                setIsLoading(true);
+              }
+            }}
           >
-            Push Commit and Merge Pull Request
+            {isLoading ? 'Loading…' : 'Push Commit and Merge Pull Request'}
           </a>
           <a
             className="font-[family-name:var(--font-geist-sans)] text-secondary hover:underline flex items-center justify-center h-12 font-medium"
diff --git a/vercel-tutor/steps.json b/vercel-tutor/steps.json
index 173467af71..1678460a2e 100644
--- a/vercel-tutor/steps.json
+++ b/vercel-tutor/steps.json
@@ -6,7 +6,7 @@
       "branchName": "main"
     },
     "target": {
-      "templatePath": "app/smaller-triangle/page.tsx",
+      "templatePath": "app/smaller-triangle.tsx",
       "branchName": "vercel-bot-patch"
     },
     "path": "app/page.tsx",
@@ -17,11 +17,11 @@
   "helpful-links": {
     "type": "commit-merge-comment",
     "base": {
-      "templatePath": "app/smaller-triangle/page.tsx",
+      "templatePath": "app/smaller-triangle.tsx",
       "branchName": "vercel-bot-patch"
     },
     "target": {
-      "templatePath": "app/helpful-links/page.tsx",
+      "templatePath": "app/helpful-links.tsx",
       "branchName": "vercel-bot-patch"
     },
     "path": "app/page.tsx",