diff --git a/objectiveai-web/app/functions/page.tsx b/objectiveai-web/app/functions/page.tsx
index 78b399f05..854d8c425 100644
--- a/objectiveai-web/app/functions/page.tsx
+++ b/objectiveai-web/app/functions/page.tsx
@@ -7,7 +7,7 @@ import { createPublicClient } from "../../lib/client";
 import { deriveCategory, deriveDisplayName } from "../../lib/objectiveai";
 import { NAV_HEIGHT_CALCULATION_DELAY_MS, STICKY_BAR_HEIGHT, STICKY_SEARCH_OVERLAP } from "../../lib/constants";
 import { useResponsive } from "../../hooks/useResponsive";
-import { ErrorAlert, EmptyState, SkeletonCard } from "../../components/ui";
+import { ErrorAlert, EmptyState } from "../../components/ui";
 
 // Function item type for UI
 interface FunctionItem {
@@ -28,7 +28,8 @@ const LOAD_MORE_COUNT = 6;
 
 export default function FunctionsPage() {
   const [functions, setFunctions] = useState<FunctionItem[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
+  const [isListLoading, setIsListLoading] = useState(true);
+  const [detailsLoaded, setDetailsLoaded] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [searchQuery, setSearchQuery] = useState("");
   const [selectedCategory, setSelectedCategory] = useState("All");
@@ -40,12 +41,16 @@ export default function FunctionsPage() {
   const [visibleCount, setVisibleCount] = useState(INITIAL_VISIBLE_COUNT);
   const searchRef = useRef<HTMLDivElement>(null);
 
-  // Fetch functions from API
+  // Fetch functions from API — progressive loading
   useEffect(() => {
+    let cancelled = false;
+
     async function fetchFunctions() {
       try {
-        setIsLoading(true);
+        setIsListLoading(true);
+        setDetailsLoaded(false);
         setError(null);
+        setFunctions([]);
 
         // Get all functions via SDK
         const client = createPublicClient();
@@ -60,46 +65,67 @@ export default function FunctionsPage() {
           }
         }
 
-        // Fetch details for each unique function (gracefully skip any that 404)
-        const results = await Promise.all(
-          Array.from(uniqueFunctions.values()).map(async (fn): Promise<FunctionItem | null> => {
-            try {
-              const slug = `${fn.owner}/${fn.repository}`;
+        if (cancelled) return;
+        setIsListLoading(false);
 
-              const details = await Functions.retrieve(client, "github", fn.owner, fn.repository, fn.commit);
+        // Fire all detail fetches concurrently — update state as each resolves
+        const entries = Array.from(uniqueFunctions.values());
+        let settled = 0;
 
-              const category = deriveCategory(details);
-              const name = deriveDisplayName(fn.repository);
+        entries.forEach((fn) => {
+          const controller = new AbortController();
+          const timeout = setTimeout(() => controller.abort(), 5000);
+
+          Functions.retrieve(client, "github", fn.owner, fn.repository, fn.commit, { signal: controller.signal })
+            .then((details) => {
+              clearTimeout(timeout);
+              if (cancelled) return;
 
+              const name = deriveDisplayName(fn.repository);
               const tags = fn.repository.split("-").filter((t: string) => t.length > 2);
               if (details.type === "vector.function") tags.push("ranking");
               else tags.push("scoring");
 
-              return {
-                slug,
+              const item: FunctionItem = {
+                slug: `${fn.owner}/${fn.repository}`,
                 owner: fn.owner,
                 repository: fn.repository,
                 commit: fn.commit,
                 name,
                 description: details.description || `${name} function`,
-                category,
+                category: deriveCategory(details),
                 tags,
               };
-            } catch {
-              return null;
-            }
-          })
-        );
 
-        setFunctions(results.filter((item): item is FunctionItem => item !== null));
+              setFunctions(prev => [...prev, item]);
+            })
+            .catch(() => {
+              clearTimeout(timeout);
+              // Skip functions that fail to load
+            })
+            .finally(() => {
+              settled++;
+              if (settled === entries.length && !cancelled) {
+                setDetailsLoaded(true);
+              }
+            });
+        });
+
+        // Edge case: no functions to fetch details for
+        if (entries.length === 0) {
+          setDetailsLoaded(true);
+        }
       } catch (err) {
-        setError(err instanceof Error ? err.message : "Failed to load functions");
-      } finally {
-        setIsLoading(false);
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : "Failed to load functions");
+          setIsListLoading(false);
+          setDetailsLoaded(true);
+        }
       }
     }
 
     fetchFunctions();
+    return () => { cancelled = true; };
   }, []);
 
   // Load pinned functions from localStorage
@@ -287,8 +313,37 @@ export default function FunctionsPage() {
             flexDirection: 'column',
             width: '100%',
           }}>
-            {/* Only render grid when we have results */}
-            {!isLoading && !error && visibleFunctions.length > 0 && (
+            {/* Skeleton grid while list is loading */}
+            {isListLoading && (
+              <div style={{
+                display: 'grid',
+                gridTemplateColumns: isMobile
+                  ? '1fr'
+                  : isTablet
+                    ? 'repeat(2, 1fr)'
+                    : filtersOpen
+                      ? 'repeat(2, 1fr)'
+                      : 'repeat(3, 1fr)',
+                gap: isMobile ? '12px' : '16px',
+              }}>
+                {Array.from({ length: INITIAL_VISIBLE_COUNT }).map((_, i) => (
+                  <div key={i} className="card" style={{
+                    padding: '16px',
+                    height: '180px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '8px',
+                  }}>
+                    <div style={{ width: '60px', height: '20px', background: 'var(--border)', borderRadius: '10px', animation: 'pulse 1.5s ease-in-out infinite' }} />
+                    <div style={{ width: '80%', height: '18px', background: 'var(--border)', borderRadius: '4px', animation: 'pulse 1.5s ease-in-out infinite' }} />
+                    <div style={{ width: '100%', height: '32px', background: 'var(--border)', borderRadius: '4px', animation: 'pulse 1.5s ease-in-out infinite' }} />
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {/* Function cards — render progressively as details arrive */}
+            {!isListLoading && !error && visibleFunctions.length > 0 && (
             <>
               <div style={{
                 display: 'grid',
@@ -399,29 +454,11 @@ export default function FunctionsPage() {
             </>
             )}
 
-            {isLoading && (
-              <div style={{
-                display: 'grid',
-                gridTemplateColumns: isMobile
-                  ? '1fr'
-                  : isTablet
-                    ? 'repeat(2, 1fr)'
-                    : filtersOpen
-                      ? 'repeat(2, 1fr)'
-                      : 'repeat(3, 1fr)',
-                gap: isMobile ? '12px' : '16px',
-              }}>
-                {Array.from({ length: 9 }).map((_, i) => (
-                  <SkeletonCard key={i} />
-                ))}
-              </div>
-            )}
-
-            {error && !isLoading && (
+            {error && !isListLoading && (
               <ErrorAlert title="Failed to load functions" message={error} />
             )}
 
-            {!isLoading && !error && filteredFunctions.length === 0 && (
+            {!isListLoading && !error && detailsLoaded && filteredFunctions.length === 0 && (
               <EmptyState message="No functions found matching your criteria" />
             )}
           </div>
diff --git a/objectiveai-web/app/page.tsx b/objectiveai-web/app/page.tsx
index a98aa6ff2..d14489d84 100644
--- a/objectiveai-web/app/page.tsx
+++ b/objectiveai-web/app/page.tsx
@@ -27,20 +27,23 @@ interface FeaturedFunction {
 
 export default function Home() {
   const { isMobile } = useResponsive();
-  const [functions, setFunctions] = useState<FeaturedFunction[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
+  const [slots, setSlots] = useState<(FeaturedFunction | null)[]>(
+    Array.from({ length: FEATURED_COUNT }, () => null)
+  );
+  const [isListLoading, setIsListLoading] = useState(true);
 
-  // Fetch functions from API
+  // Fetch functions from API — progressive loading
   useEffect(() => {
+    let cancelled = false;
+
     async function fetchFunctions() {
       try {
-        setIsLoading(true);
+        setIsListLoading(true);
 
-        // Fetch functions list via SDK
         const client = createPublicClient();
         const result = await Functions.list(client);
 
-        // Deduplicate by owner/repository (same function may have multiple commits)
+        // Deduplicate by owner/repository
         const uniqueFunctions = new Map<string, { owner: string; repository: string; commit: string }>();
         for (const fn of result.data) {
           const key = `${fn.owner}/${fn.repository}`;
@@ -49,44 +52,55 @@ export default function Home() {
           }
         }
 
-        // Limit to FEATURED_COUNT
-        const limitedFunctions = Array.from(uniqueFunctions.values()).slice(0, FEATURED_COUNT);
+        const entries = Array.from(uniqueFunctions.values()).slice(0, FEATURED_COUNT);
+        if (cancelled) return;
 
-        const results = await Promise.all(
-          limitedFunctions.map(async (fn): Promise<FeaturedFunction | null> => {
-            try {
-              const slug = `${fn.owner}/${fn.repository}`;
-              const details = await Functions.retrieve(client, "github", fn.owner, fn.repository, fn.commit);
+        // Initialize slots to match actual count
+        setSlots(Array.from({ length: entries.length }, () => null));
+        setIsListLoading(false);
 
-              const category = deriveCategory(details);
-              const name = deriveDisplayName(fn.repository);
+        // Fire all detail fetches — fill slots as each resolves
+        entries.forEach((fn, index) => {
+          const controller = new AbortController();
+          const timeout = setTimeout(() => controller.abort(), 5000);
 
+          Functions.retrieve(client, "github", fn.owner, fn.repository, fn.commit, { signal: controller.signal })
+            .then((details) => {
+              clearTimeout(timeout);
+              if (cancelled) return;
+
+              const name = deriveDisplayName(fn.repository);
               const tags = fn.repository.split("-").filter((t: string) => t.length > 2);
               if (details.type === "vector.function") tags.push("ranking");
               else tags.push("scoring");
 
-              return {
-                slug,
+              const item: FeaturedFunction = {
+                slug: `${fn.owner}/${fn.repository}`,
                 name,
                 description: details.description || `${name} function`,
-                category,
+                category: deriveCategory(details),
                 tags,
               };
-            } catch {
-              return null;
-            }
-          })
-        );
 
-        setFunctions(results.filter((item): item is FeaturedFunction => item !== null));
+              setSlots(prev => {
+                const next = [...prev];
+                next[index] = item;
+                return next;
+              });
+            })
+            .catch(() => {
+              clearTimeout(timeout);
+            });
+        });
       } catch {
-        // Silent failure - page still renders, just without featured functions
-      } finally {
-        setIsLoading(false);
+        if (!cancelled) {
+          setIsListLoading(false);
+        }
       }
     }
 
     fetchFunctions();
+    return () => { cancelled = true; };
   }, []);
 
   return (
@@ -181,122 +195,99 @@ export default function Home() {
             </Link>
           </div>
 
-          {/* Function Cards Grid */}
+          {/* Function Cards Grid — slots fill progressively */}
           <div className="gridThree">
-            {isLoading ? (
-              // Loading skeleton
-              Array.from({ length: FEATURED_COUNT }).map((_, i) => (
-                <div key={i} className="card" style={{
-                  padding: '16px',
-                  height: '180px',
+            {slots.map((fn, i) => fn ? (
+              <Link
+                key={fn.slug}
+                href={`/functions/${fn.slug}`}
+                style={{ textDecoration: 'none', color: 'inherit' }}
+              >
+                <div className="card" style={{
+                  cursor: 'pointer',
+                  height: '100%',
                   display: 'flex',
                   flexDirection: 'column',
-                  gap: '8px',
+                  position: 'relative',
+                  padding: '16px',
                 }}>
+                  <span className="tag" style={{
+                    alignSelf: 'flex-start',
+                    marginBottom: '8px',
+                    fontSize: '11px',
+                    padding: '4px 10px'
+                  }}>
+                    {fn.category}
+                  </span>
+                  <h3 style={{ fontSize: '16px', fontWeight: 600, marginBottom: '6px' }}>
+                    {fn.name}
+                  </h3>
+                  <p style={{
+                    fontSize: '13px',
+                    lineHeight: 1.5,
+                    color: 'var(--text-muted)',
+                    flex: 1,
+                    marginBottom: '12px',
+                    display: '-webkit-box',
+                    WebkitLineClamp: 2,
+                    WebkitBoxOrient: 'vertical',
+                    overflow: 'hidden',
+                  }}>
+                    {fn.description}
+                  </p>
                   <div style={{
-                    width: '60px',
-                    height: '20px',
-                    background: 'var(--border)',
-                    borderRadius: '10px',
-                    animation: 'pulse 1.5s ease-in-out infinite',
-                  }} />
-                  <div style={{
-                    width: '80%',
-                    height: '18px',
-                    background: 'var(--border)',
-                    borderRadius: '4px',
-                    animation: 'pulse 1.5s ease-in-out infinite',
-                  }} />
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    gap: '4px',
+                    marginBottom: '10px',
+                  }}>
+                    {fn.tags.slice(0, 2).map(tag => (
+                      <span key={tag} style={{
+                        fontSize: '11px',
+                        padding: '3px 8px',
+                        background: 'var(--border)',
+                        borderRadius: '10px',
+                        color: 'var(--text-muted)',
+                      }}>
+                        {tag}
+                      </span>
+                    ))}
+                    {fn.tags.length > 2 && (
+                      <span style={{
+                        fontSize: '11px',
+                        padding: '3px 8px',
+                        color: 'var(--text-muted)',
+                      }}>
+                        +{fn.tags.length - 2}
+                      </span>
+                    )}
+                  </div>
                   <div style={{
-                    width: '100%',
-                    height: '32px',
-                    background: 'var(--border)',
-                    borderRadius: '4px',
-                    animation: 'pulse 1.5s ease-in-out infinite',
-                  }} />
-                </div>
-              ))
-            ) : functions.length > 0 ? (
-              functions.map(fn => (
-                <Link
-                  key={fn.slug}
-                  href={`/functions/${fn.slug}`}
-                  style={{ textDecoration: 'none', color: 'inherit' }}
-                >
-                  <div className="card" style={{
-                    cursor: 'pointer',
-                    height: '100%',
+                    fontSize: '13px',
+                    fontWeight: 600,
+                    color: 'var(--accent)',
                     display: 'flex',
-                    flexDirection: 'column',
-                    position: 'relative',
-                    padding: '16px',
+                    alignItems: 'center',
+                    gap: '4px',
                   }}>
-                    <span className="tag" style={{
-                      alignSelf: 'flex-start',
-                      marginBottom: '8px',
-                      fontSize: '11px',
-                      padding: '4px 10px'
-                    }}>
-                      {fn.category}
-                    </span>
-                    <h3 style={{ fontSize: '16px', fontWeight: 600, marginBottom: '6px' }}>
-                      {fn.name}
-                    </h3>
-                    <p style={{
-                      fontSize: '13px',
-                      lineHeight: 1.5,
-                      color: 'var(--text-muted)',
-                      flex: 1,
-                      marginBottom: '12px',
-                      display: '-webkit-box',
-                      WebkitLineClamp: 2,
-                      WebkitBoxOrient: 'vertical',
-                      overflow: 'hidden',
-                    }}>
-                      {fn.description}
-                    </p>
-                    <div style={{
-                      display: 'flex',
-                      flexWrap: 'wrap',
-                      gap: '4px',
-                      marginBottom: '10px',
-                    }}>
-                      {fn.tags.slice(0, 2).map(tag => (
-                        <span key={tag} style={{
-                          fontSize: '11px',
-                          padding: '3px 8px',
-                          background: 'var(--border)',
-                          borderRadius: '10px',
-                          color: 'var(--text-muted)',
-                        }}>
-                          {tag}
-                        </span>
-                      ))}
-                      {fn.tags.length > 2 && (
-                        <span style={{
-                          fontSize: '11px',
-                          padding: '3px 8px',
-                          color: 'var(--text-muted)',
-                        }}>
-                          +{fn.tags.length - 2}
-                        </span>
-                      )}
-                    </div>
-                    <div style={{
-                      fontSize: '13px',
-                      fontWeight: 600,
-                      color: 'var(--accent)',
-                      display: 'flex',
-                      alignItems: 'center',
-                      gap: '4px',
-                    }}>
-                      Open <span>→</span>
-                    </div>
+                    Open <span>→</span>
                   </div>
-                </Link>
-              ))
+                </div>
+              </Link>
             ) : (
-              // Empty state
+              <div key={i} className="card" style={{
+                padding: '16px',
+                height: '180px',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '8px',
+              }}>
+                <div style={{ width: '60px', height: '20px', background: 'var(--border)', borderRadius: '10px', animation: 'pulse 1.5s ease-in-out infinite' }} />
+                <div style={{ width: '80%', height: '18px', background: 'var(--border)', borderRadius: '4px', animation: 'pulse 1.5s ease-in-out infinite' }} />
+                <div style={{ width: '100%', height: '32px', background: 'var(--border)', borderRadius: '4px', animation: 'pulse 1.5s ease-in-out infinite' }} />
+              </div>
+            ))}
+            {!isListLoading && slots.length === 0 && (
               <div style={{
                 gridColumn: '1 / -1',
                 textAlign: 'center',