Add skeleton loading state to functions browse page

[mayagore]

Summary

The functions browse page (/functions) shows "Loading functions..." text while data is being fetched. A skeleton loading state (pulsing placeholder cards) would give much better perceived performance.

What to do

1. Create a SkeletonCard component in objectiveai-web/components/ui/

   • Pulsing gray rectangle matching the card dimensions on the browse page
   • Use CSS animation (e.g., @keyframes pulse) — no extra dependencies needed
   • Follow the pattern in existing components/ui/ components (LoadingSpinner.tsx, ErrorAlert.tsx)

2. Use SkeletonCard in objectiveai-web/app/functions/page.tsx

   • Replace the "Loading functions..." text with a grid of 6-8 skeleton cards
   • Match the existing grid layout (gridThree class)

Files to create/modify

• Create: objectiveai-web/components/ui/SkeletonCard.tsx
• Modify: objectiveai-web/app/functions/page.tsx (loading state)

Reference

• Existing UI components: objectiveai-web/components/ui/LoadingSpinner.tsx
• Design tokens: objectiveai-web/app/globals.css (uses var(--border), var(--page-bg))

Acceptance criteria

• Skeleton cards appear while functions are loading
• Cards match the approximate size of real function cards
• Smooth pulse animation using CSS only
• No layout shift when real cards replace skeletons

Setup

npm install
npm run dev --workspace=objectiveai-web

[hozi8-web3]

I Can do this

[hozi8-web3]

#101