[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)
vercel · Jan 14, 2025 · cc41987 · cc41987
1 parent 12cc0c2
commit cc41987
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 5 deletions.
diff --git a/vercel-tutor/app/helpful-links/page.tsx → vercel-tutor/app/helpful-links.tsx b/vercel-tutor/app/helpful-links/page.tsx → vercel-tutor/app/helpful-links.tsx
diff --git 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 → vercel-tutor/app/smaller-triangle.tsx b/vercel-tutor/app/smaller-triangle/page.tsx → 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
@@ -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",