chore: mobile and performance improvements for demo

jumski · jumski · commit 4d96fa98d733 · 2025-05-04T18:57:32.000+02:00
Squashed commit of the following: commit 9d2760121402497e0a4fd356725b3fcbfad68193 Author: Wojtek Majewski <wojciech.majewski@pm.me> Date: Sun May 4 18:56:03 2025 +0200 chore: update dependency versions and remove redundant entries - Removed duplicate and outdated std/internal and std/assert entries from lock file - Updated @types/node to version 18.19.87 for consistency - Added undici-types@5.26.5 with integrity hash for improved type support - Ensured dependencies are aligned and cleaned up lock file for better reproducibility commit 13ffeb6b8c1af0141eb82a14c1d0b0fac0dfbdfa Author: Wojtek Majewski <wojciech.majewski@pm.me> Date: Sun May 4 18:55:58 2025 +0200 fix: set maxPollSeconds to 2 in analyze website worker scripts - Updated analyze_website_worker_0/index.ts to include maxPollSeconds option - Updated analyze_website_worker_1/index.ts similarly - Ensures consistent polling timeout configuration across worker scripts commit 925f69b Author: Wojtek Majewski <wojciech.majewski@pm.me> Date: Sun May 4 18:55:04 2025 +0200 refactor: enhance user experience with transition states and component updates - Replace direct state updates with useTransition for smoother UI during async operations - Update website analysis flow to prevent multiple triggers and improve error handling - Refactor example links component to handle login state and start analysis asynchronously - Add disabled states and pending texts to buttons and inputs for better UX - Switch from using exampleLinks array to ExampleLinks component for modularity - Minor code cleanup and consistency improvements across components commit b78a02e Author: Wojtek Majewski <wojciech.majewski@pm.me> Date: Sun May 4 18:46:05 2025 +0200 refactor: adjust layout and styling of analysis UI panels for better responsiveness - Reordered and resized the analysis and main panels for improved mobile and desktop layout - Updated class names to enhance positioning, spacing, and visual consistency - Removed redundant code and streamlined component structure for clarity commit f62bb32 Author: Wojtek Majewski <wojciech.majewski@pm.me> Date: Sun May 4 18:40:50 2025 +0200 refactor: update layout and comments for run page UI sections Rearranged panel order for mobile and desktop views, added descriptive comments for UI components, and adjusted positioning classes for better responsiveness and clarity.
diff --git a/examples/playground/app/page.tsx b/examples/playground/app/page.tsx
@@ -2,7 +2,7 @@ import Hero from '@/components/hero';
 import WebsiteAnalyzerForm from '@/components/website-analyzer-form';
 import AuthRedirectHandler from '@/components/auth-redirect-handler';
 import { createClient } from '@/utils/supabase/server';
-import { exampleLinks } from '@/lib/example-links';
+import ExampleLinks from '@/components/example-links';
 
 export default async function Home() {
   const supabase = await createClient();
@@ -35,21 +35,7 @@ export default async function Home() {
               <h3 className="text-lg font-medium mb-2">
                 Example Websites to Analyze
               </h3>
-              <div className="flex flex-wrap gap-4">
-                {exampleLinks.map((link) => (
-                  <a
-                    key={link.url}
-                    href={`/websites?url=${link.url}`}
-                    className={`inline-flex px-3 py-2 ${
-                      link.variant === 'success'
-                        ? 'bg-green-100 text-green-800 hover:bg-green-200'
-                        : 'bg-red-100 text-red-800 hover:bg-red-200'
-                    } rounded-md text-sm font-medium`}
-                  >
-                    {link.label}
-                  </a>
-                ))}
-              </div>
+              <ExampleLinks isLoggedIn={isLoggedIn} />
             </div>
           </div>
         </div>
diff --git a/examples/playground/app/websites/page.tsx b/examples/playground/app/websites/page.tsx
@@ -1,11 +1,11 @@
 'use client';
 
 import { createClient } from '@/utils/supabase/client';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useTransition } from 'react';
 import type { Database } from '@/supabase/functions/database-types';
 import { Label } from '@/components/ui/label';
 import { Input } from '@/components/ui/input';
-import { FormMessage, Message } from '@/components/form-message';
+import { FormMessage } from '@/components/form-message';
 import { SubmitButton } from '@/components/submit-button';
 import { useRouter } from 'next/navigation';
 
@@ -15,6 +15,7 @@ export default function Page() {
   const [websites, setWebsites] = useState<WebsiteRow[] | null>(null);
   const [formError, setFormError] = useState<string | null>(null);
   const [url, setUrl] = useState('https://reddit.com/r/supabase');
+  const [isPending, startTransition] = useTransition();
   const supabase = createClient();
   const router = useRouter();
 
@@ -34,32 +35,38 @@ export default function Page() {
       if (urlParam) {
         setUrl(urlParam);
         console.log("Found URL parameter, starting analysis:", urlParam);
-        startAnalysis(urlParam);
+        
+        // Use a tiny delay to ensure we're already in the client-side
+        // This helps prevent the page from fully rendering before redirecting
+        setTimeout(() => {
+          startAnalysis(urlParam);
+        }, 10);
       }
     }
   }, []);
   
   async function startAnalysis(url: string) {
-    if (!url) {
-      setFormError('Please enter a URL');
+    if (!url || isPending) {
       return;
     }
 
     try {
-      const { data, error } = await supabase.rpc('start_analyze_website_flow', {
-        url,
-      });
+      startTransition(async () => {
+        const { data, error } = await supabase.rpc('start_analyze_website_flow', {
+          url,
+        });
 
-      if (error) {
-        setFormError(error.message);
-        return;
-      }
+        if (error) {
+          setFormError(error.message);
+          return;
+        }
 
-      if (data && data.run_id) {
-        router.push(`/websites/runs/${data.run_id}`);
-      } else {
-        setFormError('Failed to start flow analysis');
-      }
+        if (data && data.run_id) {
+          router.push(`/websites/runs/${data.run_id}`);
+        } else {
+          setFormError('Failed to start flow analysis');
+        }
+      });
     } catch (error) {
       setFormError('An error occurred while starting the analysis');
       console.error(error);
@@ -69,26 +76,28 @@ export default function Page() {
   async function startAnalyzeWebsiteFlow(formData: FormData) {
     const url = formData.get('url') as string;
 
-    if (!url) {
+    if (!url || isPending) {
       setFormError('Please enter a URL');
       return;
     }
 
     try {
-      const { data, error } = await supabase.rpc('start_analyze_website_flow', {
-        url,
-      });
+      startTransition(async () => {
+        const { data, error } = await supabase.rpc('start_analyze_website_flow', {
+          url,
+        });
 
-      if (error) {
-        setFormError(error.message);
-        return;
-      }
+        if (error) {
+          setFormError(error.message);
+          return;
+        }
 
-      if (data && data.run_id) {
-        router.push(`/websites/runs/${data.run_id}`);
-      } else {
-        setFormError('Failed to start flow analysis');
-      }
+        if (data && data.run_id) {
+          router.push(`/websites/runs/${data.run_id}`);
+        } else {
+          setFormError('Failed to start flow analysis');
+        }
+      });
     } catch (error) {
       setFormError('An error occurred while starting the analysis');
       console.error(error);
@@ -114,9 +123,14 @@ export default function Page() {
                 value={url}
                 onChange={(e) => setUrl(e.target.value)}
                 required
+                disabled={isPending}
               />
             </div>
-            <SubmitButton formAction={startAnalyzeWebsiteFlow}>
+            <SubmitButton 
+              formAction={startAnalyzeWebsiteFlow} 
+              disabled={isPending}
+              pendingText="🔄 Starting analysis..."
+            >
               Start Analysis
             </SubmitButton>
             {formError && <FormMessage message={{ error: formError }} />}
diff --git a/examples/playground/app/websites/runs/[run_id]/page.tsx b/examples/playground/app/websites/runs/[run_id]/page.tsx
@@ -29,22 +29,10 @@ function RunPageContent() {
 
   return (
     <div className="flex flex-col lg:flex-row">
-      {/* Main panel: User-friendly UI */}
-      <div className="lg:w-[65%] xl:w-[70%] lg:pr-6">
-        <WebsiteAnalysisUI
-          runData={runData}
-          loading={loading}
-          error={error}
-          onAnalyzeWebsite={analyzeWebsite}
-          analyzeLoading={analyzeLoading}
-          analyzeError={analyzeError}
-        />
-      </div>
-
-      {/* Side panel: Technical details - fixed position */}
-      <div className="lg:w-[35%] xl:w-[30%]">
+      {/* Debug panel: Technical details - first on mobile, right side on desktop */}
+      <div className="w-full lg:w-[35%] xl:w-[30%] order-first lg:order-last mb-6 lg:mb-0">
         <div 
-          className={`fixed top-16 bottom-4 right-4 lg:w-[calc(35%-2rem)] xl:w-[calc(30%-2rem)] overflow-hidden flex flex-col transition-all duration-300 group border hover:shadow-lg
+          className={`relative lg:fixed lg:top-16 lg:bottom-4 lg:right-4 w-full lg:w-[calc(35%-2rem)] xl:w-[calc(30%-2rem)] overflow-hidden flex flex-col transition-all duration-300 group border hover:shadow-lg
             ${isPinned 
               ? "opacity-100 border-solid border-foreground/30" 
               : "opacity-50 hover:opacity-100 cursor-pointer border-dashed border-foreground/20 hover:border-solid"
@@ -148,6 +136,18 @@ function RunPageContent() {
           />
         </div>
       </div>
+
+      {/* Main panel: User-friendly UI - second on mobile, left side on desktop */}
+      <div className="w-full lg:w-[65%] xl:w-[70%] lg:pr-6 order-last lg:order-first">
+        <WebsiteAnalysisUI
+          runData={runData}
+          loading={loading}
+          error={error}
+          onAnalyzeWebsite={analyzeWebsite}
+          analyzeLoading={analyzeLoading}
+          analyzeError={analyzeError}
+        />
+      </div>
     </div>
   );
 }
diff --git a/examples/playground/components/example-links.tsx b/examples/playground/components/example-links.tsx
@@ -0,0 +1,79 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { useTransition } from 'react';
+import { createClient } from '@/utils/supabase/client';
+import { exampleLinks } from '@/lib/example-links';
+
+export default function ExampleLinks({ isLoggedIn }: { isLoggedIn: boolean }) {
+  const [isPending, startTransition] = useTransition();
+  const router = useRouter();
+  const supabase = createClient();
+
+  // Function to handle example link clicks
+  const handleExampleClick = (e: React.MouseEvent<HTMLAnchorElement>, url: string) => {
+    if (isPending) {
+      e.preventDefault();
+      return;
+    }
+
+    e.preventDefault();
+    
+    // If user is not logged in, redirect to sign-in page
+    if (!isLoggedIn) {
+      console.log('User not logged in, storing URL and redirecting to sign-in:', url);
+      localStorage.setItem('pendingAnalysisUrl', url);
+      router.push('/sign-in');
+      return;
+    }
+
+    console.log('Starting analysis for example URL:', url);
+    
+    startTransition(async () => {
+      try {
+        const { data, error } = await supabase.rpc('start_analyze_website_flow', {
+          url,
+        });
+
+        if (error) {
+          console.error('Error starting analysis:', error);
+          return;
+        }
+
+        if (data && data.run_id) {
+          console.log(
+            'Analysis started, redirecting to:',
+            `/websites/runs/${data.run_id}`,
+          );
+          router.push(`/websites/runs/${data.run_id}`);
+        } else {
+          console.error('No run_id returned from analysis');
+        }
+      } catch (error) {
+        console.error('Exception during analysis:', error);
+      }
+    });
+  };
+
+  return (
+    <div className="flex flex-wrap gap-4">
+      {exampleLinks.map((link) => (
+        <a
+          key={link.url}
+          onClick={(e) => handleExampleClick(e, link.url)}
+          href="#"
+          className={`inline-flex px-3 py-2 ${
+            link.variant === 'success'
+              ? 'bg-green-100 text-green-800 hover:bg-green-200'
+              : 'bg-red-100 text-red-800 hover:bg-red-200'
+          } rounded-md text-sm font-medium ${
+            isPending ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'
+          }`}
+          aria-disabled={isPending}
+        >
+          {link.label}
+        </a>
+      ))}
+    </div>
+  );
+}
diff --git a/examples/playground/components/website-analyzer-form.tsx b/examples/playground/components/website-analyzer-form.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useRouter } from 'next/navigation';
-import { useState } from 'react';
+import { useState, useTransition } from 'react';
 import { Label } from '@/components/ui/label';
 import { Input } from '@/components/ui/input';
 import { FormMessage } from '@/components/form-message';
@@ -14,6 +14,7 @@ export default function WebsiteAnalyzerForm({
   isLoggedIn: boolean;
 }) {
   const [formError, setFormError] = useState<string | null>(null);
+  const [isPending, startTransition] = useTransition();
   const router = useRouter();
   const supabase = createClient();
 
@@ -44,26 +45,29 @@ export default function WebsiteAnalyzerForm({
 
     try {
       console.log('Starting analysis for URL:', url);
-      const { data, error } = await supabase.rpc('start_analyze_website_flow', {
-        url,
-      });
+      // Start the transition to show loading state
+      startTransition(async () => {
+        const { data, error } = await supabase.rpc('start_analyze_website_flow', {
+          url,
+        });
 
-      if (error) {
-        console.error('Error starting analysis:', error);
-        setFormError(error.message);
-        return;
-      }
+        if (error) {
+          console.error('Error starting analysis:', error);
+          setFormError(error.message);
+          return;
+        }
 
-      if (data && data.run_id) {
-        console.log(
-          'Analysis started, redirecting to:',
-          `/websites/runs/${data.run_id}`,
-        );
-        router.push(`/websites/runs/${data.run_id}`);
-      } else {
-        console.error('No run_id returned from analysis');
-        setFormError('Failed to start flow analysis');
-      }
+        if (data && data.run_id) {
+          console.log(
+            'Analysis started, redirecting to:',
+            `/websites/runs/${data.run_id}`,
+          );
+          router.push(`/websites/runs/${data.run_id}`);
+        } else {
+          console.error('No run_id returned from analysis');
+          setFormError('Failed to start flow analysis');
+        }
+      });
     } catch (error) {
       setFormError('An error occurred while starting the analysis');
       console.error('Exception during analysis:', error);
@@ -87,9 +91,10 @@ export default function WebsiteAnalyzerForm({
             placeholder="https://example.com"
             defaultValue="https://example.com"
             required
+            disabled={isPending}
           />
         </div>
-        <SubmitButton>
+        <SubmitButton disabled={isPending} pendingText="🔄 Starting analysis...">
           {isLoggedIn ? '🚀 Start Analysis' : 'Sign in & Analyze'}
         </SubmitButton>
         {formError && <FormMessage message={{ error: formError }} />}
diff --git a/examples/playground/supabase/functions/analyze_website_worker_0/index.ts b/examples/playground/supabase/functions/analyze_website_worker_0/index.ts
@@ -1,4 +1,4 @@
 import { EdgeWorker } from '@pgflow/edge-worker';
 import AnalyzeWebsite from '../_flows/analyze_website.ts';
 
-EdgeWorker.start(AnalyzeWebsite);
+EdgeWorker.start(AnalyzeWebsite, { maxPollSeconds: 2 });
diff --git a/examples/playground/supabase/functions/analyze_website_worker_1/index.ts b/examples/playground/supabase/functions/analyze_website_worker_1/index.ts
@@ -1,4 +1,4 @@
 import { EdgeWorker } from '@pgflow/edge-worker';
 import AnalyzeWebsite from '../_flows/analyze_website.ts';
 
-EdgeWorker.start(AnalyzeWebsite);
+EdgeWorker.start(AnalyzeWebsite, { maxPollSeconds: 2 });
diff --git a/examples/playground/supabase/functions/deno.lock b/examples/playground/supabase/functions/deno.lock
