From a938fb4ec5d04c8498663de5b8426e745d9ebdb6 Mon Sep 17 00:00:00 2001
From: freepilot-bot <215356755+freepilot-bot@users.noreply.github.com>
Date: Fri, 13 Jun 2025 12:46:43 +0000
Subject: [PATCH] feat: add intermediate loading page for app views

- Create new AppLoadingPage component with 5-second countdown
- Update routing to serve /apps/:id/view with intermediate page
- Replace all /api/apps/:id/view links with /apps/:id/view
- Add LNFly branding and AI disclaimer to loading page
- Include mobile-responsive design with progress bar
- Support preview key parameter forwarding
- Automatically redirect to actual app after countdown
- Add instant view button for immediate access
---
 frontend/src/components/ExploreApps.tsx |   2 +-
 frontend/src/main.tsx                   |   7 +-
 frontend/src/pages/AppLoadingPage.tsx   | 116 ++++++++++++++++++++++++
 frontend/src/pages/AppStatusPage.tsx    |   2 +-
 4 files changed, 124 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/pages/AppLoadingPage.tsx

diff --git a/frontend/src/components/ExploreApps.tsx b/frontend/src/components/ExploreApps.tsx
index 4f7aafa..b1d1471 100644
--- a/frontend/src/components/ExploreApps.tsx
+++ b/frontend/src/components/ExploreApps.tsx
@@ -270,7 +270,7 @@ function ExploreApps({ onFork }: ExploreAppsProps) {
                       </Button>
                     </a>
                   )}
-                  <a href={`/api/apps/${app.id}/view`} target="_blank">
+                  <a href={`/apps/${app.id}/view`} target="_blank">
                     <Button size="sm">View</Button>
                   </a>
                   <Button
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index 684654b..c2ed413 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -3,6 +3,7 @@ import { createRoot } from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom"; // Import necessary router components
 import App from "./App.tsx";
 import AppStatusPage from "./pages/AppStatusPage.tsx"; // Import status page component
+import AppLoadingPage from "./pages/AppLoadingPage.tsx"; // Import app loading page component
 // No need to import AppViewPage
 import { Toaster } from "./components/ui/sonner.tsx";
 
@@ -19,7 +20,11 @@ const router = createBrowserRouter([
     path: "/apps/:id",
     element: <AppStatusPage />, // App status page
   },
-  // Remove the route for /apps/:id/view as it will be handled by the backend directly
+  {
+    path: "/apps/:id/view",
+    element: <AppLoadingPage />, // Intermediate loading page
+  },
+  // Backend will handle /api/apps/:id/view directly
 ]);
 
 createRoot(document.getElementById("root")!).render(
diff --git a/frontend/src/pages/AppLoadingPage.tsx b/frontend/src/pages/AppLoadingPage.tsx
new file mode 100644
index 0000000..6c2f4c8
--- /dev/null
+++ b/frontend/src/pages/AppLoadingPage.tsx
@@ -0,0 +1,116 @@
+import { useEffect, useState } from "react";
+import { useNavigate, useParams, useSearchParams } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import Logo from "@/assets/logo.svg";
+
+interface AppLoadingPageProps {}
+
+function AppLoadingPage({}: AppLoadingPageProps) {
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+  const [countdown, setCountdown] = useState(5);
+
+  // Get preview key from URL params
+  const previewKey = searchParams.get('previewKey');
+  
+  // Build the actual app URL with preview key if needed
+  const appUrl = `/api/apps/${id}/view${previewKey ? `?previewKey=${previewKey}` : ''}`;
+
+  useEffect(() => {
+    // Update countdown every second
+    const interval = setInterval(() => {
+      setCountdown((prev) => {
+        if (prev <= 1) {
+          // Countdown finished, redirect to actual app
+          window.location.href = appUrl;
+          return 0;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, [appUrl]);
+
+  const handleViewNow = () => {
+    // Immediately redirect to the app
+    window.location.href = appUrl;
+  };
+
+  const handleGoHome = () => {
+    navigate("/");
+  };
+
+  return (
+    <div className="font-sans flex flex-col items-center min-h-screen py-4 px-4 sm:py-8">
+      {/* Background logo */}
+      <img
+        src={Logo}
+        alt="LNFly Logo"
+        className="w-screen h-screen object-cover fixed top-0 left-0 -z-10 opacity-15 object-center"
+      />
+      
+      <main className="flex-1 w-full flex-grow flex flex-col items-center justify-center">
+        <div className="w-full max-w-md mx-auto">
+          <Card className="w-full shadow-lg">
+            <CardContent className="pt-6 text-center">
+              {/* Main heading */}
+              <h1 className="text-xl sm:text-2xl font-bold mb-4 leading-tight">
+                App created with{" "}
+                <button 
+                  onClick={handleGoHome}
+                  className="text-blue-600 hover:text-blue-800 underline cursor-pointer transition-colors"
+                >
+                  LNFly
+                </button>
+              </h1>
+
+              {/* Subtitle explaining what LNFly is */}
+              <p className="text-base sm:text-lg text-muted-foreground mb-4">
+                AI-powered app creation platform
+              </p>
+
+              {/* Warning message */}
+              <div className="text-sm text-orange-600 bg-orange-50 border border-orange-200 rounded-lg p-3 mb-6 text-left">
+                <p className="font-medium mb-1">⚠️ Important Notice</p>
+                <p>Apps on LNFly are vibe coded with AI. Use at your own risk.</p>
+              </div>
+
+              {/* Countdown display */}
+              <div className="mb-6">
+                <p className="text-base sm:text-lg mb-3">
+                  Automatically loading app in:
+                </p>
+                <div className="text-3xl sm:text-4xl font-bold text-blue-600 mb-4 tabular-nums">
+                  {countdown}
+                </div>
+                <div className="w-full bg-gray-200 rounded-full h-3 mb-2">
+                  <div 
+                    className="bg-blue-600 h-3 rounded-full transition-all duration-1000 ease-linear shadow-sm"
+                    style={{ width: `${((5 - countdown) / 5) * 100}%` }}
+                  ></div>
+                </div>
+                <p className="text-xs text-gray-500">
+                  {countdown > 0 ? `${countdown} second${countdown !== 1 ? 's' : ''} remaining` : 'Redirecting...'}
+                </p>
+              </div>
+
+              {/* Action button */}
+              <Button 
+                onClick={handleViewNow}
+                className="w-full text-base sm:text-lg py-3 bg-blue-600 hover:bg-blue-700 transition-colors"
+                size="lg"
+              >
+                View App Now
+              </Button>
+            </CardContent>
+          </Card>
+        </div>
+      </main>
+    </div>
+  );
+}
+
+export default AppLoadingPage;
\ No newline at end of file
diff --git a/frontend/src/pages/AppStatusPage.tsx b/frontend/src/pages/AppStatusPage.tsx
index 07de8fa..81686e1 100644
--- a/frontend/src/pages/AppStatusPage.tsx
+++ b/frontend/src/pages/AppStatusPage.tsx
@@ -1102,7 +1102,7 @@ function AppStatusPage() {
                     href={
                       buttonDisabled
                         ? "#"
-                        : `/api/apps/${id}/view${
+                        : `/apps/${id}/view${
                             appData.published ? "" : `?previewKey=${previewKey}`
                           }`
                     }