feat(loading) show route specific skeleton UI (#3671)

* chore: fix conflicts

* chore: updated loading states

apps/sim/app/(auth)/login/loading.tsx

@@ -0,0 +1,24 @@
+import { Skeleton } from '@/components/emcn'
+
+export default function LoginLoading() {
+  return (
+    <div className='flex flex-col items-center'>
+      <Skeleton className='h-[38px] w-[80px] rounded-[4px]' />
+      <div className='mt-[32px] w-full space-y-[8px]'>
+        <Skeleton className='h-[14px] w-[40px] rounded-[4px]' />
+        <Skeleton className='h-[44px] w-full rounded-[10px]' />
+      </div>
+      <div className='mt-[16px] w-full space-y-[8px]'>
+        <Skeleton className='h-[14px] w-[64px] rounded-[4px]' />
+        <Skeleton className='h-[44px] w-full rounded-[10px]' />
+      </div>
+      <Skeleton className='mt-[24px] h-[44px] w-full rounded-[10px]' />
+      <Skeleton className='mt-[24px] h-[1px] w-full rounded-[1px]' />
+      <div className='mt-[24px] flex w-full gap-[12px]'>
+        <Skeleton className='h-[44px] flex-1 rounded-[10px]' />
+        <Skeleton className='h-[44px] flex-1 rounded-[10px]' />
+      </div>
+      <Skeleton className='mt-[24px] h-[14px] w-[200px] rounded-[4px]' />
+    </div>
+  )
+}

apps/sim/app/(auth)/oauth/consent/loading.tsx

@@ -0,0 +1,21 @@
+import { Skeleton } from '@/components/emcn'
+
+export default function OAuthConsentLoading() {
+  return (
+    <div className='flex flex-col items-center'>
+      <div className='flex items-center gap-[16px]'>
+        <Skeleton className='h-[48px] w-[48px] rounded-[12px]' />
+        <Skeleton className='h-[20px] w-[20px] rounded-[4px]' />
+        <Skeleton className='h-[48px] w-[48px] rounded-[12px]' />
+      </div>
+      <Skeleton className='mt-[24px] h-[38px] w-[220px] rounded-[4px]' />
+      <Skeleton className='mt-[8px] h-[14px] w-[280px] rounded-[4px]' />
+      <Skeleton className='mt-[24px] h-[56px] w-full rounded-[8px]' />
+      <Skeleton className='mt-[16px] h-[120px] w-full rounded-[8px]' />
+      <div className='mt-[24px] flex w-full max-w-[410px] gap-[12px]'>
+        <Skeleton className='h-[44px] flex-1 rounded-[10px]' />
+        <Skeleton className='h-[44px] flex-1 rounded-[10px]' />
+      </div>
+    </div>
+  )
+}

apps/sim/app/(auth)/reset-password/loading.tsx

@@ -0,0 +1,16 @@
+import { Skeleton } from '@/components/emcn'
+
+export default function ResetPasswordLoading() {
+  return (
+    <div className='flex flex-col items-center'>
+      <Skeleton className='h-[38px] w-[160px] rounded-[4px]' />
+      <Skeleton className='mt-[12px] h-[14px] w-[280px] rounded-[4px]' />
+      <div className='mt-[32px] w-full space-y-[8px]'>
+        <Skeleton className='h-[14px] w-[40px] rounded-[4px]' />
+        <Skeleton className='h-[44px] w-full rounded-[10px]' />
+      </div>
+      <Skeleton className='mt-[24px] h-[44px] w-full rounded-[10px]' />
+      <Skeleton className='mt-[24px] h-[14px] w-[120px] rounded-[4px]' />
+    </div>
+  )
+}

apps/sim/app/(auth)/signup/loading.tsx

@@ -0,0 +1,28 @@
+import { Skeleton } from '@/components/emcn'
+
+export default function SignupLoading() {
+  return (
+    <div className='flex flex-col items-center'>
+      <Skeleton className='h-[38px] w-[100px] rounded-[4px]' />
+      <div className='mt-[32px] w-full space-y-[8px]'>
+        <Skeleton className='h-[14px] w-[40px] rounded-[4px]' />
+        <Skeleton className='h-[44px] w-full rounded-[10px]' />
+      </div>
+      <div className='mt-[16px] w-full space-y-[8px]'>
+        <Skeleton className='h-[14px] w-[40px] rounded-[4px]' />
+        <Skeleton className='h-[44px] w-full rounded-[10px]' />
+      </div>
+      <div className='mt-[16px] w-full space-y-[8px]'>
+        <Skeleton className='h-[14px] w-[64px] rounded-[4px]' />
+        <Skeleton className='h-[44px] w-full rounded-[10px]' />
+      </div>
+      <Skeleton className='mt-[24px] h-[44px] w-full rounded-[10px]' />
+      <Skeleton className='mt-[24px] h-[1px] w-full rounded-[1px]' />
+      <div className='mt-[24px] flex w-full gap-[12px]'>
+        <Skeleton className='h-[44px] flex-1 rounded-[10px]' />
+        <Skeleton className='h-[44px] flex-1 rounded-[10px]' />
+      </div>
+      <Skeleton className='mt-[24px] h-[14px] w-[220px] rounded-[4px]' />
+    </div>
+  )
+}

apps/sim/app/(auth)/sso/loading.tsx

@@ -0,0 +1,16 @@
+import { Skeleton } from '@/components/emcn'
+
+export default function SSOLoading() {
+  return (
+    <div className='flex flex-col items-center'>
+      <Skeleton className='h-[38px] w-[120px] rounded-[4px]' />
+      <Skeleton className='mt-[12px] h-[14px] w-[260px] rounded-[4px]' />
+      <div className='mt-[32px] w-full space-y-[8px]'>
+        <Skeleton className='h-[14px] w-[80px] rounded-[4px]' />
+        <Skeleton className='h-[44px] w-full rounded-[10px]' />
+      </div>
+      <Skeleton className='mt-[24px] h-[44px] w-full rounded-[10px]' />
+      <Skeleton className='mt-[24px] h-[14px] w-[120px] rounded-[4px]' />
+    </div>
+  )
+}

apps/sim/app/(auth)/verify/loading.tsx

@@ -0,0 +1,12 @@
+import { Skeleton } from '@/components/emcn'
+
+export default function VerifyLoading() {
+  return (
+    <div className='flex flex-col items-center'>
+      <Skeleton className='h-[38px] w-[180px] rounded-[4px]' />
+      <Skeleton className='mt-[12px] h-[14px] w-[300px] rounded-[4px]' />
+      <Skeleton className='mt-[4px] h-[14px] w-[240px] rounded-[4px]' />
+      <Skeleton className='mt-[32px] h-[44px] w-full rounded-[10px]' />
+    </div>
+  )
+}

apps/sim/app/(landing)/blog/[slug]/loading.tsx

@@ -0,0 +1,59 @@
+import { Skeleton } from '@/components/emcn'
+
+export default function BlogPostLoading() {
+  return (
+    <article className='w-full'>
+      {/* Header area */}
+      <div className='mx-auto max-w-[1450px] px-6 pt-8 sm:px-8 sm:pt-12 md:px-12 md:pt-16'>
+        {/* Back link */}
+        <div className='mb-6'>
+          <Skeleton className='h-[16px] w-[60px] rounded-[4px] bg-[#2A2A2A]' />
+        </div>
+        {/* Image + title row */}
+        <div className='flex flex-col gap-8 md:flex-row md:gap-12'>
+          {/* Image */}
+          <div className='w-full flex-shrink-0 md:w-[450px]'>
+            <Skeleton className='aspect-[450/360] w-full rounded-lg bg-[#2A2A2A]' />
+          </div>
+          {/* Title + author */}
+          <div className='flex flex-1 flex-col justify-between'>
+            <div>
+              <Skeleton className='h-[48px] w-full rounded-[4px] bg-[#2A2A2A]' />
+              <Skeleton className='mt-[8px] h-[48px] w-[80%] rounded-[4px] bg-[#2A2A2A]' />
+            </div>
+            <div className='mt-4 flex items-center justify-between'>
+              <div className='flex items-center gap-2'>
+                <Skeleton className='h-[24px] w-[24px] rounded-full bg-[#2A2A2A]' />
+                <Skeleton className='h-[16px] w-[100px] rounded-[4px] bg-[#2A2A2A]' />
+              </div>
+              <Skeleton className='h-[32px] w-[32px] rounded-[6px] bg-[#2A2A2A]' />
+            </div>
+          </div>
+        </div>
+        {/* Divider */}
+        <Skeleton className='mt-8 h-[1px] w-full bg-[#2A2A2A] sm:mt-12' />
+        {/* Date + description */}
+        <div className='flex flex-col gap-6 py-8 sm:flex-row sm:items-start sm:justify-between sm:gap-8 sm:py-10'>
+          <Skeleton className='h-[16px] w-[120px] flex-shrink-0 rounded-[4px] bg-[#2A2A2A]' />
+          <div className='flex-1 space-y-[8px]'>
+            <Skeleton className='h-[20px] w-full rounded-[4px] bg-[#2A2A2A]' />
+            <Skeleton className='h-[20px] w-[70%] rounded-[4px] bg-[#2A2A2A]' />
+          </div>
+        </div>
+      </div>
+      {/* Article body */}
+      <div className='mx-auto max-w-[900px] px-6 pb-20 sm:px-8 md:px-12'>
+        <div className='space-y-[16px]'>
+          <Skeleton className='h-[16px] w-full rounded-[4px] bg-[#2A2A2A]' />
+          <Skeleton className='h-[16px] w-[95%] rounded-[4px] bg-[#2A2A2A]' />
+          <Skeleton className='h-[16px] w-[88%] rounded-[4px] bg-[#2A2A2A]' />
+          <Skeleton className='h-[16px] w-full rounded-[4px] bg-[#2A2A2A]' />
+          <Skeleton className='mt-[24px] h-[24px] w-[200px] rounded-[4px] bg-[#2A2A2A]' />
+          <Skeleton className='h-[16px] w-full rounded-[4px] bg-[#2A2A2A]' />
+          <Skeleton className='h-[16px] w-[92%] rounded-[4px] bg-[#2A2A2A]' />
+          <Skeleton className='h-[16px] w-[85%] rounded-[4px] bg-[#2A2A2A]' />
+        </div>
+      </div>
+    </article>
+  )
+}

apps/sim/app/(landing)/blog/authors/[id]/loading.tsx

@@ -0,0 +1,25 @@
+import { Skeleton } from '@/components/emcn'
+
+const SKELETON_POST_COUNT = 4
+
+export default function AuthorLoading() {
+  return (
+    <main className='mx-auto max-w-[900px] px-6 py-10 sm:px-8 md:px-12'>
+      <div className='mb-6 flex items-center gap-3'>
+        <Skeleton className='h-[40px] w-[40px] rounded-full bg-[#2A2A2A]' />
+        <Skeleton className='h-[32px] w-[160px] rounded-[4px] bg-[#2A2A2A]' />
+      </div>
+      <div className='grid grid-cols-1 gap-8 sm:grid-cols-2'>
+        {Array.from({ length: SKELETON_POST_COUNT }).map((_, i) => (
+          <div key={i} className='overflow-hidden rounded-lg border border-[#2A2A2A]'>
+            <Skeleton className='h-[160px] w-full rounded-none bg-[#2A2A2A]' />
+            <div className='p-3'>
+              <Skeleton className='mb-1 h-[12px] w-[80px] rounded-[4px] bg-[#2A2A2A]' />
+              <Skeleton className='h-[14px] w-[200px] rounded-[4px] bg-[#2A2A2A]' />
+            </div>
+          </div>
+        ))}
+      </div>
+    </main>
+  )
+}

apps/sim/app/(landing)/blog/loading.tsx

@@ -0,0 +1,29 @@
+import { Skeleton } from '@/components/emcn'
+
+const SKELETON_CARD_COUNT = 6
+
+export default function BlogLoading() {
+  return (
+    <main className='mx-auto max-w-[1200px] px-6 py-12 sm:px-8 md:px-12'>
+      <Skeleton className='h-[48px] w-[100px] rounded-[4px] bg-[#2A2A2A]' />
+      <Skeleton className='mt-3 h-[18px] w-[420px] rounded-[4px] bg-[#2A2A2A]' />
+      <div className='mt-10 grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6 lg:grid-cols-3'>
+        {Array.from({ length: SKELETON_CARD_COUNT }).map((_, i) => (
+          <div key={i} className='flex flex-col overflow-hidden rounded-xl border border-[#2A2A2A]'>
+            <Skeleton className='aspect-video w-full rounded-none bg-[#2A2A2A]' />
+            <div className='flex flex-1 flex-col p-4'>
+              <Skeleton className='mb-2 h-[12px] w-[80px] rounded-[4px] bg-[#2A2A2A]' />
+              <Skeleton className='mb-1 h-[20px] w-[85%] rounded-[4px] bg-[#2A2A2A]' />
+              <Skeleton className='mb-3 h-[14px] w-full rounded-[4px] bg-[#2A2A2A]' />
+              <Skeleton className='h-[14px] w-[70%] rounded-[4px] bg-[#2A2A2A]' />
+              <div className='mt-3 flex items-center gap-2'>
+                <Skeleton className='h-[16px] w-[16px] rounded-full bg-[#2A2A2A]' />
+                <Skeleton className='h-[12px] w-[80px] rounded-[4px] bg-[#2A2A2A]' />
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </main>
+  )
+}

apps/sim/app/(landing)/blog/tags/loading.tsx

@@ -0,0 +1,20 @@
+import { Skeleton } from '@/components/emcn'
+
+const SKELETON_TAG_COUNT = 12
+
+export default function TagsLoading() {
+  return (
+    <main className='mx-auto max-w-[900px] px-6 py-10 sm:px-8 md:px-12'>
+      <Skeleton className='mb-6 h-[32px] w-[200px] rounded-[4px] bg-[#2A2A2A]' />
+      <div className='flex flex-wrap gap-3'>
+        {Array.from({ length: SKELETON_TAG_COUNT }).map((_, i) => (
+          <Skeleton
+            key={i}
+            className='h-[30px] rounded-full bg-[#2A2A2A]'
+            style={{ width: `${60 + (i % 4) * 24}px` }}
+          />
+        ))}
+      </div>
+    </main>
+  )
+}

apps/sim/app/(landing)/privacy/loading.tsx

@@ -0,0 +1,59 @@
+import { Skeleton } from '@/components/emcn'
+
+export default function PrivacyLoading() {
+  return (
+    <main className='min-h-screen bg-[#1C1C1C] text-[#ECECEC]'>
+      <div className='flex h-[52px] items-center border-[#2A2A2A] border-b px-6'>
+        <Skeleton className='h-[22px] w-[60px] rounded-[4px] bg-[#2A2A2A]' />
+        <div className='ml-auto flex items-center gap-[12px]'>
+          <Skeleton className='h-[30px] w-[64px] rounded-[5px] bg-[#2A2A2A]' />
+          <Skeleton className='h-[30px] w-[80px] rounded-[5px] bg-[#2A2A2A]' />
+        </div>
+      </div>
+      <div className='mx-auto max-w-[800px] px-6 pt-[60px] pb-[80px] sm:px-12'>
+        <Skeleton className='mx-auto h-[48px] w-[280px] rounded-[4px] bg-[#2A2A2A]' />
+        <div className='mt-12 space-y-8'>
+          <div className='space-y-[10px]'>
+            <Skeleton className='h-[15px] w-[180px] rounded-[4px] bg-[#2A2A2A]' />
+            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[#2A2A2A]' />
+            <Skeleton className='h-[15px] w-[95%] rounded-[4px] bg-[#2A2A2A]' />
+            <Skeleton className='h-[15px] w-[88%] rounded-[4px] bg-[#2A2A2A]' />
+          </div>
+          <div className='mt-12 space-y-[10px]'>
+            <Skeleton className='h-[28px] w-[320px] rounded-[4px] bg-[#2A2A2A]' />
+            <div className='mt-4 space-y-[10px]'>
+              <Skeleton className='h-[20px] w-[160px] rounded-[4px] bg-[#2A2A2A]' />
+              <Skeleton className='h-[15px] w-full rounded-[4px] bg-[#2A2A2A]' />
+              <Skeleton className='h-[15px] w-[92%] rounded-[4px] bg-[#2A2A2A]' />
+              <Skeleton className='h-[15px] w-[85%] rounded-[4px] bg-[#2A2A2A]' />
+            </div>
+          </div>
+          <div className='mt-12 space-y-[10px]'>
+            <Skeleton className='h-[28px] w-[260px] rounded-[4px] bg-[#2A2A2A]' />
+            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[#2A2A2A]' />
+            <Skeleton className='h-[15px] w-[90%] rounded-[4px] bg-[#2A2A2A]' />
+            <div className='mt-4 space-y-[8px] pl-6'>
+              <Skeleton className='h-[15px] w-[70%] rounded-[4px] bg-[#2A2A2A]' />
+              <Skeleton className='h-[15px] w-[60%] rounded-[4px] bg-[#2A2A2A]' />
+              <Skeleton className='h-[15px] w-[75%] rounded-[4px] bg-[#2A2A2A]' />
+              <Skeleton className='h-[15px] w-[65%] rounded-[4px] bg-[#2A2A2A]' />
+            </div>
+          </div>
+          <div className='mt-12 space-y-[10px]'>
+            <Skeleton className='h-[28px] w-[300px] rounded-[4px] bg-[#2A2A2A]' />
+            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[#2A2A2A]' />
+            <Skeleton className='h-[15px] w-[95%] rounded-[4px] bg-[#2A2A2A]' />
+            <Skeleton className='h-[15px] w-[88%] rounded-[4px] bg-[#2A2A2A]' />
+            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[#2A2A2A]' />
+          </div>
+          <div className='mt-12 space-y-[10px]'>
+            <Skeleton className='h-[28px] w-[220px] rounded-[4px] bg-[#2A2A2A]' />
+            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[#2A2A2A]' />
+            <Skeleton className='h-[15px] w-[93%] rounded-[4px] bg-[#2A2A2A]' />
+            <Skeleton className='h-[15px] w-[80%] rounded-[4px] bg-[#2A2A2A]' />
+          </div>
+        </div>
+      </div>
+    </main>
+  )
+}

apps/sim/app/(landing)/terms/loading.tsx

@@ -0,0 +1,52 @@
+import { Skeleton } from '@/components/emcn'
+
+export default function TermsLoading() {
+  return (
+    <main className='min-h-screen bg-[#1C1C1C] text-[#ECECEC]'>
+      <div className='flex h-[52px] items-center border-[#2A2A2A] border-b px-6'>
+        <Skeleton className='h-[22px] w-[60px] rounded-[4px] bg-[#2A2A2A]' />
+        <div className='ml-auto flex items-center gap-[12px]'>
+          <Skeleton className='h-[30px] w-[64px] rounded-[5px] bg-[#2A2A2A]' />
+          <Skeleton className='h-[30px] w-[80px] rounded-[5px] bg-[#2A2A2A]' />
+        </div>
+      </div>
+      <div className='mx-auto max-w-[800px] px-6 pt-[60px] pb-[80px] sm:px-12'>
+        <Skeleton className='mx-auto h-[48px] w-[320px] rounded-[4px] bg-[#2A2A2A]' />
+        <div className='mt-12 space-y-8'>
+          <div className='space-y-[10px]'>
+            <Skeleton className='h-[15px] w-[180px] rounded-[4px] bg-[#2A2A2A]' />
+            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[#2A2A2A]' />
+            <Skeleton className='h-[15px] w-[95%] rounded-[4px] bg-[#2A2A2A]' />
+            <Skeleton className='h-[15px] w-[88%] rounded-[4px] bg-[#2A2A2A]' />
+          </div>
+          <div className='mt-12 space-y-[10px]'>
+            <Skeleton className='h-[28px] w-[140px] rounded-[4px] bg-[#2A2A2A]' />
+            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[#2A2A2A]' />
+            <Skeleton className='h-[15px] w-[92%] rounded-[4px] bg-[#2A2A2A]' />
+            <Skeleton className='h-[15px] w-[85%] rounded-[4px] bg-[#2A2A2A]' />
+            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[#2A2A2A]' />
+          </div>
+          <div className='mt-12 space-y-[10px]'>
+            <Skeleton className='h-[28px] w-[260px] rounded-[4px] bg-[#2A2A2A]' />
+            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[#2A2A2A]' />
+            <Skeleton className='h-[15px] w-[90%] rounded-[4px] bg-[#2A2A2A]' />
+            <Skeleton className='h-[15px] w-[75%] rounded-[4px] bg-[#2A2A2A]' />
+          </div>
+          <div className='mt-12 space-y-[10px]'>
+            <Skeleton className='h-[28px] w-[380px] rounded-[4px] bg-[#2A2A2A]' />
+            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[#2A2A2A]' />
+            <Skeleton className='h-[15px] w-[95%] rounded-[4px] bg-[#2A2A2A]' />
+            <Skeleton className='h-[15px] w-[88%] rounded-[4px] bg-[#2A2A2A]' />
+            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[#2A2A2A]' />
+          </div>
+          <div className='mt-12 space-y-[10px]'>
+            <Skeleton className='h-[28px] w-[300px] rounded-[4px] bg-[#2A2A2A]' />
+            <Skeleton className='h-[15px] w-full rounded-[4px] bg-[#2A2A2A]' />
+            <Skeleton className='h-[15px] w-[93%] rounded-[4px] bg-[#2A2A2A]' />
+            <Skeleton className='h-[15px] w-[80%] rounded-[4px] bg-[#2A2A2A]' />
+          </div>
+        </div>
+      </div>
+    </main>
+  )
+}

apps/sim/app/changelog/loading.tsx

@@ -0,0 +1,38 @@
+import { Skeleton } from '@/components/emcn'
+
+export default function ChangelogLoading() {
+  return (
+    <div className='min-h-screen'>
+      <div className='relative grid md:grid-cols-2'>
+        <div className='relative top-0 overflow-hidden border-[#2A2A2A] border-b px-6 py-16 sm:px-10 md:sticky md:h-dvh md:border-r md:border-b-0 md:px-12 md:py-24'>
+          <div className='relative mx-auto h-full max-w-xl md:flex md:flex-col md:justify-center'>
+            <Skeleton className='mt-6 h-[48px] w-[200px] rounded-[4px] bg-[#2A2A2A]' />
+            <Skeleton className='mt-4 h-[14px] w-[300px] rounded-[4px] bg-[#2A2A2A]' />
+            <Skeleton className='mt-[4px] h-[14px] w-[260px] rounded-[4px] bg-[#2A2A2A]' />
+            <Skeleton className='mt-6 h-[1px] w-full bg-[#2A2A2A]' />
+            <div className='mt-6 flex flex-wrap items-center gap-3'>
+              <Skeleton className='h-[32px] w-[130px] rounded-[5px] bg-[#2A2A2A]' />
+              <Skeleton className='h-[32px] w-[120px] rounded-[5px] bg-[#2A2A2A]' />
+              <Skeleton className='h-[32px] w-[80px] rounded-[5px] bg-[#2A2A2A]' />
+            </div>
+          </div>
+        </div>
+        <div className='px-6 py-16 sm:px-10 md:px-12 md:py-24'>
+          <div className='max-w-2xl space-y-[32px]'>
+            {Array.from({ length: 4 }).map((_, i) => (
+              <div key={i} className='space-y-[12px]'>
+                <Skeleton className='h-[20px] w-[160px] rounded-[4px] bg-[#2A2A2A]' />
+                <Skeleton className='h-[14px] w-[100px] rounded-[4px] bg-[#2A2A2A]' />
+                <div className='space-y-[8px]'>
+                  <Skeleton className='h-[14px] w-full rounded-[4px] bg-[#2A2A2A]' />
+                  <Skeleton className='h-[14px] w-[90%] rounded-[4px] bg-[#2A2A2A]' />
+                  <Skeleton className='h-[14px] w-[75%] rounded-[4px] bg-[#2A2A2A]' />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

apps/sim/app/chat/[identifier]/loading.tsx

@@ -0,0 +1,39 @@
+import { Skeleton } from '@/components/emcn'
+
+export default function ChatLoading() {
+  return (
+    <div className='fixed inset-0 z-[100] flex flex-col bg-white text-foreground'>
+      <div className='border-b px-4 py-3'>
+        <div className='mx-auto flex max-w-3xl items-center justify-between'>
+          <div className='flex items-center gap-[12px]'>
+            <Skeleton className='h-[28px] w-[28px] rounded-[6px]' />
+            <Skeleton className='h-[18px] w-[120px] rounded-[4px]' />
+          </div>
+          <Skeleton className='h-[28px] w-[80px] rounded-[6px]' />
+        </div>
+      </div>
+      <div className='flex min-h-0 flex-1 items-center justify-center px-4'>
+        <div className='w-full max-w-[410px]'>
+          <div className='flex flex-col items-center justify-center'>
+            <div className='space-y-2 text-center'>
+              <Skeleton className='mx-auto h-8 w-32' />
+              <Skeleton className='mx-auto h-4 w-48' />
+            </div>
+            <div className='mt-8 w-full space-y-8'>
+              <div className='space-y-2'>
+                <Skeleton className='h-4 w-16' />
+                <Skeleton className='h-10 w-full rounded-[10px]' />
+              </div>
+              <Skeleton className='h-10 w-full rounded-[10px]' />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className='relative p-3 pb-4 md:p-4 md:pb-6'>
+        <div className='relative mx-auto max-w-3xl md:max-w-[748px]'>
+          <Skeleton className='h-[48px] w-full rounded-[12px]' />
+        </div>
+      </div>
+    </div>
+  )
+}

apps/sim/app/credential-account/[token]/loading.tsx

@@ -0,0 +1,19 @@
+import { Skeleton } from '@/components/emcn'
+
+export default function CredentialAccountLoading() {
+  return (
+    <main className='relative flex min-h-screen flex-col text-foreground'>
+      <div className='relative z-30 flex flex-1 items-center justify-center px-4 pb-24'>
+        <div className='w-full max-w-lg px-4'>
+          <div className='flex flex-col items-center justify-center'>
+            <Skeleton className='h-[48px] w-[48px] rounded-[12px]' />
+            <Skeleton className='mt-[16px] h-[24px] w-[200px] rounded-[4px]' />
+            <Skeleton className='mt-[8px] h-[14px] w-[280px] rounded-[4px]' />
+            <Skeleton className='mt-[4px] h-[14px] w-[240px] rounded-[4px]' />
+            <Skeleton className='mt-[24px] h-[44px] w-[200px] rounded-[10px]' />
+          </div>
+        </div>
+      </div>
+    </main>
+  )
+}

apps/sim/app/form/[identifier]/loading.tsx

@@ -0,0 +1,29 @@
+import { Skeleton } from '@/components/emcn'
+
+export default function FormLoading() {
+  return (
+    <main className='relative flex min-h-screen flex-col text-foreground'>
+      <div className='relative z-30 flex flex-1 items-center justify-center px-4 pb-24'>
+        <div className='w-full max-w-[410px]'>
+          <div className='flex flex-col items-center justify-center'>
+            <div className='space-y-2 text-center'>
+              <Skeleton className='mx-auto h-8 w-32' />
+              <Skeleton className='mx-auto h-4 w-48' />
+            </div>
+            <div className='mt-8 w-full space-y-8'>
+              <div className='space-y-2'>
+                <Skeleton className='h-4 w-16' />
+                <Skeleton className='h-10 w-full rounded-[10px]' />
+              </div>
+              <div className='space-y-2'>
+                <Skeleton className='h-4 w-20' />
+                <Skeleton className='h-10 w-full rounded-[10px]' />
+              </div>
+              <Skeleton className='h-10 w-full rounded-[10px]' />
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+  )
+}

apps/sim/app/invite/[id]/loading.tsx

@@ -0,0 +1,13 @@
+import { Skeleton } from '@/components/emcn'
+
+export default function InviteLoading() {
+  return (
+    <div className='flex flex-col items-center justify-center'>
+      <Skeleton className='h-[48px] w-[48px] rounded-[12px]' />
+      <Skeleton className='mt-[16px] h-[24px] w-[200px] rounded-[4px]' />
+      <Skeleton className='mt-[8px] h-[14px] w-[280px] rounded-[4px]' />
+      <Skeleton className='mt-[4px] h-[14px] w-[240px] rounded-[4px]' />
+      <Skeleton className='mt-[24px] h-[44px] w-[200px] rounded-[10px]' />
+    </div>
+  )
+}

apps/sim/app/resume/[workflowId]/[executionId]/loading.tsx

@@ -0,0 +1,42 @@
+import { Skeleton } from '@/components/emcn'
+
+export default function ResumeLoading() {
+  return (
+    <div className='min-h-screen bg-background'>
+      <div className='border-b px-4 py-3'>
+        <div className='mx-auto flex max-w-[1200px] items-center justify-between'>
+          <Skeleton className='h-[24px] w-[80px] rounded-[4px]' />
+          <Skeleton className='h-[28px] w-[100px] rounded-[6px]' />
+        </div>
+      </div>
+      <div className='mx-auto max-w-[1200px] px-6 py-8'>
+        <div className='grid grid-cols-[280px_1fr] gap-6'>
+          <div className='space-y-[8px]'>
+            <Skeleton className='h-[20px] w-[120px] rounded-[4px]' />
+            {Array.from({ length: 3 }).map((_, i) => (
+              <Skeleton key={i} className='h-[48px] w-full rounded-[8px]' />
+            ))}
+          </div>
+          <div className='rounded-[8px] border p-6'>
+            <Skeleton className='h-[24px] w-[200px] rounded-[4px]' />
+            <Skeleton className='mt-[12px] h-[16px] w-[320px] rounded-[4px]' />
+            <div className='mt-[24px] space-y-[16px]'>
+              <div className='space-y-[8px]'>
+                <Skeleton className='h-[14px] w-[80px] rounded-[4px]' />
+                <Skeleton className='h-[40px] w-full rounded-[8px]' />
+              </div>
+              <div className='space-y-[8px]'>
+                <Skeleton className='h-[14px] w-[100px] rounded-[4px]' />
+                <Skeleton className='h-[80px] w-full rounded-[8px]' />
+              </div>
+            </div>
+            <div className='mt-[24px] flex gap-[12px]'>
+              <Skeleton className='h-[40px] w-[120px] rounded-[8px]' />
+              <Skeleton className='h-[40px] w-[120px] rounded-[8px]' />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

apps/sim/app/templates/[id]/loading.tsx

@@ -0,0 +1,55 @@
+import { Skeleton } from '@/components/emcn'
+
+export default function TemplateDetailLoading() {
+  return (
+    <div className='flex min-h-screen flex-col'>
+      <div className='border-b px-6 py-3'>
+        <div className='mx-auto flex max-w-[1200px] items-center justify-between'>
+          <Skeleton className='h-[24px] w-[80px] rounded-[4px]' />
+          <div className='flex items-center gap-[12px]'>
+            <Skeleton className='h-[32px] w-[80px] rounded-[6px]' />
+            <Skeleton className='h-[32px] w-[80px] rounded-[6px]' />
+          </div>
+        </div>
+      </div>
+      <div className='mx-auto w-full max-w-[1200px] px-6 pt-[24px] pb-[24px]'>
+        <div className='flex items-center gap-[8px]'>
+          <Skeleton className='h-[14px] w-[72px] rounded-[4px]' />
+          <Skeleton className='h-[14px] w-[8px] rounded-[2px]' />
+          <Skeleton className='h-[14px] w-[120px] rounded-[4px]' />
+        </div>
+
+        <div className='mt-[14px] flex items-center justify-between'>
+          <Skeleton className='h-[27px] w-[250px] rounded-[4px]' />
+          <div className='flex items-center gap-[8px]'>
+            <Skeleton className='h-[32px] w-[80px] rounded-[6px]' />
+            <Skeleton className='h-[32px] w-[80px] rounded-[6px]' />
+          </div>
+        </div>
+        <Skeleton className='mt-[4px] h-[16px] w-[360px] rounded-[4px]' />
+        <div className='mt-[16px] flex items-center gap-[8px]'>
+          <Skeleton className='h-[16px] w-[48px] rounded-[4px]' />
+          <Skeleton className='h-[16px] w-[48px] rounded-[4px]' />
+          <Skeleton className='h-[16px] w-[1px] rounded-[1px]' />
+          <Skeleton className='h-[20px] w-[20px] rounded-full' />
+          <Skeleton className='h-[16px] w-[80px] rounded-[4px]' />
+        </div>
+        <Skeleton className='mt-[24px] h-[450px] w-full rounded-[8px]' />
+        <Skeleton className='mt-[32px] h-[20px] w-[180px] rounded-[4px]' />
+        <div className='mt-[12px] space-y-[8px]'>
+          <Skeleton className='h-[14px] w-full rounded-[4px]' />
+          <Skeleton className='h-[14px] w-[85%] rounded-[4px]' />
+          <Skeleton className='h-[14px] w-[70%] rounded-[4px]' />
+        </div>
+        <Skeleton className='mt-[32px] h-[20px] w-[160px] rounded-[4px]' />
+        <div className='mt-[12px] flex items-center gap-[12px]'>
+          <Skeleton className='h-[48px] w-[48px] rounded-full' />
+          <div className='space-y-[6px]'>
+            <Skeleton className='h-[16px] w-[120px] rounded-[4px]' />
+            <Skeleton className='h-[14px] w-[200px] rounded-[4px]' />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

apps/sim/app/templates/loading.tsx

@@ -0,0 +1,36 @@
+import { Skeleton } from '@/components/emcn'
+
+const SKELETON_CARD_COUNT = 8
+
+export default function TemplatesLoading() {
+  return (
+    <div className='min-h-screen bg-white'>
+      <div className='border-b px-6 py-3'>
+        <div className='mx-auto flex max-w-[1200px] items-center justify-between'>
+          <Skeleton className='h-[24px] w-[80px] rounded-[4px]' />
+          <div className='flex items-center gap-[12px]'>
+            <Skeleton className='h-[32px] w-[80px] rounded-[6px]' />
+            <Skeleton className='h-[32px] w-[80px] rounded-[6px]' />
+          </div>
+        </div>
+      </div>
+      <div className='mx-auto max-w-[1200px] px-6 py-8'>
+        <Skeleton className='h-[40px] w-[400px] rounded-[8px]' />
+        <div className='mt-[16px] flex gap-[8px]'>
+          <Skeleton className='h-[32px] w-[64px] rounded-[6px]' />
+        </div>
+        <div className='mt-[24px] grid grid-cols-1 gap-x-[20px] gap-y-[40px] md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'>
+          {Array.from({ length: SKELETON_CARD_COUNT }).map((_, i) => (
+            <div key={i} className='h-[268px] w-full rounded-[8px] bg-[var(--surface-3)] p-[8px]'>
+              <Skeleton className='h-[180px] w-full rounded-[6px]' />
+              <div className='mt-[10px] px-[4px]'>
+                <Skeleton className='h-[14px] w-[120px] rounded-[4px]' />
+                <Skeleton className='mt-[6px] h-[12px] w-[180px] rounded-[4px]' />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}

apps/sim/app/unsubscribe/loading.tsx

@@ -0,0 +1,13 @@
+import { Skeleton } from '@/components/emcn'
+
+export default function UnsubscribeLoading() {
+  return (
+    <div className='flex flex-col items-center justify-center'>
+      <Skeleton className='h-[48px] w-[48px] rounded-[12px]' />
+      <Skeleton className='mt-[16px] h-[24px] w-[180px] rounded-[4px]' />
+      <Skeleton className='mt-[8px] h-[14px] w-[300px] rounded-[4px]' />
+      <Skeleton className='mt-[4px] h-[14px] w-[260px] rounded-[4px]' />
+      <Skeleton className='mt-[24px] h-[44px] w-[200px] rounded-[10px]' />
+    </div>
+  )
+}

apps/sim/app/workspace/[workspaceId]/files/[fileId]/view/loading.tsx

@@ -0,0 +1,9 @@
+import { Loader2 } from 'lucide-react'
+
+export default function FileViewLoading() {
+  return (
+    <div className='fixed inset-0 z-50 flex items-center justify-center bg-[var(--bg)]'>
+      <Loader2 className='h-[20px] w-[20px] animate-spin text-[var(--text-tertiary)]' />
+    </div>
+  )
+}

apps/sim/app/workspace/[workspaceId]/files/loading.tsx

@@ -0,0 +1,62 @@
+import { Skeleton } from '@/components/emcn'
+
+const SKELETON_ROW_COUNT = 5
+const COLUMN_COUNT = 6
+
+export default function FilesLoading() {
+  return (
+    <div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
+      <div className='border-b border-[var(--border)] px-[24px] py-[10px]'>
+        <div className='flex items-center justify-between'>
+          <div className='flex items-center gap-[12px]'>
+            <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
+            <Skeleton className='h-[14px] w-[32px] rounded-[4px]' />
+          </div>
+          <div className='flex items-center gap-[6px]'>
+            <Skeleton className='h-[28px] w-[72px] rounded-[6px]' />
+            <Skeleton className='h-[28px] w-[64px] rounded-[6px]' />
+          </div>
+        </div>
+      </div>
+      <div className='border-b border-[var(--border)] px-[24px] py-[10px]'>
+        <div className='flex items-center'>
+          <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
+          <Skeleton className='ml-[10px] h-[14px] w-[120px] rounded-[4px]' />
+        </div>
+      </div>
+      <div className='min-h-0 flex-1 overflow-auto'>
+        <table className='w-full'>
+          <thead>
+            <tr className='border-b border-[var(--border)]'>
+              <th className='w-[40px] px-[12px] py-[8px]'>
+                <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
+              </th>
+              {Array.from({ length: COLUMN_COUNT }).map((_, i) => (
+                <th key={i} className='px-[12px] py-[8px] text-left'>
+                  <Skeleton className='h-[12px] w-[56px] rounded-[4px]' />
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {Array.from({ length: SKELETON_ROW_COUNT }).map((_, rowIndex) => (
+              <tr key={rowIndex} className='border-b border-[var(--border)]'>
+                <td className='w-[40px] px-[12px] py-[10px]'>
+                  <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
+                </td>
+                {Array.from({ length: COLUMN_COUNT }).map((_, colIndex) => (
+                  <td key={colIndex} className='px-[12px] py-[10px]'>
+                    <Skeleton
+                      className='h-[14px] rounded-[4px]'
+                      style={{ width: colIndex === 0 ? '128px' : '80px' }}
+                    />
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}

apps/sim/app/workspace/[workspaceId]/home/loading.tsx

@@ -0,0 +1,22 @@
+import { Skeleton } from '@/components/emcn'
+
+const SKELETON_LINE_COUNT = 4
+
+export default function HomeLoading() {
+  return (
+    <div className='flex h-full flex-col bg-[var(--bg)]'>
+      <div className='min-h-0 flex-1 overflow-hidden px-6 py-4'>
+        <div className='mx-auto max-w-[42rem] space-y-[10px] pt-3'>
+          {Array.from({ length: SKELETON_LINE_COUNT }).map((_, i) => (
+            <Skeleton key={i} className='h-[16px]' style={{ width: `${120 + (i % 4) * 48}px` }} />
+          ))}
+        </div>
+      </div>
+      <div className='flex-shrink-0 px-[24px] pb-[16px]'>
+        <div className='mx-auto max-w-[42rem]'>
+          <Skeleton className='h-[48px] w-full rounded-[12px]' />
+        </div>
+      </div>
+    </div>
+  )
+}

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/loading.tsx

@@ -0,0 +1,67 @@
+import { Skeleton } from '@/components/emcn'
+
+const SKELETON_ROW_COUNT = 5
+const COLUMN_COUNT = 4
+
+export default function DocumentLoading() {
+  return (
+    <div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
+      <div className='border-b border-[var(--border)] px-[16px] py-[8.5px]'>
+        <div className='flex items-center justify-between'>
+          <div className='flex items-center gap-[8px]'>
+            <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
+            <Skeleton className='h-[14px] w-[96px] rounded-[4px]' />
+            <Skeleton className='h-[14px] w-[8px] rounded-[2px]' />
+            <Skeleton className='h-[14px] w-[100px] rounded-[4px]' />
+            <Skeleton className='h-[14px] w-[8px] rounded-[2px]' />
+            <Skeleton className='h-[14px] w-[80px] rounded-[4px]' />
+          </div>
+        </div>
+      </div>
+      <div className='border-b border-[var(--border)] px-[24px] py-[10px]'>
+        <div className='flex items-center justify-between'>
+          <div className='flex items-center'>
+            <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
+            <Skeleton className='ml-[10px] h-[14px] w-[120px] rounded-[4px]' />
+          </div>
+          <div className='flex items-center gap-[6px]'>
+            <Skeleton className='h-[28px] w-[56px] rounded-[6px]' />
+          </div>
+        </div>
+      </div>
+      <div className='min-h-0 flex-1 overflow-auto'>
+        <table className='w-full'>
+          <thead>
+            <tr className='border-b border-[var(--border)]'>
+              <th className='w-[40px] px-[12px] py-[8px]'>
+                <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
+              </th>
+              {Array.from({ length: COLUMN_COUNT }).map((_, i) => (
+                <th key={i} className='px-[12px] py-[8px] text-left'>
+                  <Skeleton className='h-[12px] w-[56px] rounded-[4px]' />
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {Array.from({ length: SKELETON_ROW_COUNT }).map((_, rowIndex) => (
+              <tr key={rowIndex} className='border-b border-[var(--border)]'>
+                <td className='w-[40px] px-[12px] py-[10px]'>
+                  <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
+                </td>
+                {Array.from({ length: COLUMN_COUNT }).map((_, colIndex) => (
+                  <td key={colIndex} className='px-[12px] py-[10px]'>
+                    <Skeleton
+                      className='h-[14px] rounded-[4px]'
+                      style={{ width: colIndex === 0 ? '200px' : '80px' }}
+                    />
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/loading.tsx

@@ -0,0 +1,69 @@
+import { Skeleton } from '@/components/emcn'
+
+const SKELETON_ROW_COUNT = 5
+const COLUMN_COUNT = 7
+
+export default function KnowledgeBaseLoading() {
+  return (
+    <div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
+      <div className='border-b border-[var(--border)] px-[16px] py-[8.5px]'>
+        <div className='flex items-center justify-between'>
+          <div className='flex items-center gap-[8px]'>
+            <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
+            <Skeleton className='h-[14px] w-[96px] rounded-[4px]' />
+            <Skeleton className='h-[14px] w-[8px] rounded-[2px]' />
+            <Skeleton className='h-[14px] w-[120px] rounded-[4px]' />
+          </div>
+          <div className='flex items-center gap-[6px]'>
+            <Skeleton className='h-[28px] w-[112px] rounded-[6px]' />
+          </div>
+        </div>
+      </div>
+      <div className='border-b border-[var(--border)] px-[24px] py-[10px]'>
+        <div className='flex items-center justify-between'>
+          <div className='flex items-center'>
+            <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
+            <Skeleton className='ml-[10px] h-[14px] w-[140px] rounded-[4px]' />
+          </div>
+          <div className='flex items-center gap-[6px]'>
+            <Skeleton className='h-[28px] w-[56px] rounded-[6px]' />
+            <Skeleton className='h-[28px] w-[56px] rounded-[6px]' />
+          </div>
+        </div>
+      </div>
+      <div className='min-h-0 flex-1 overflow-auto'>
+        <table className='w-full'>
+          <thead>
+            <tr className='border-b border-[var(--border)]'>
+              <th className='w-[40px] px-[12px] py-[8px]'>
+                <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
+              </th>
+              {Array.from({ length: COLUMN_COUNT }).map((_, i) => (
+                <th key={i} className='px-[12px] py-[8px] text-left'>
+                  <Skeleton className='h-[12px] w-[56px] rounded-[4px]' />
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {Array.from({ length: SKELETON_ROW_COUNT }).map((_, rowIndex) => (
+              <tr key={rowIndex} className='border-b border-[var(--border)]'>
+                <td className='w-[40px] px-[12px] py-[10px]'>
+                  <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
+                </td>
+                {Array.from({ length: COLUMN_COUNT }).map((_, colIndex) => (
+                  <td key={colIndex} className='px-[12px] py-[10px]'>
+                    <Skeleton
+                      className='h-[14px] rounded-[4px]'
+                      style={{ width: colIndex === 0 ? '128px' : '80px' }}
+                    />
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}

apps/sim/app/workspace/[workspaceId]/knowledge/loading.tsx

@@ -0,0 +1,63 @@
+import { Skeleton } from '@/components/emcn'
+
+const SKELETON_ROW_COUNT = 5
+const COLUMN_COUNT = 6
+
+export default function KnowledgeLoading() {
+  return (
+    <div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
+      <div className='border-b border-[var(--border)] px-[24px] py-[10px]'>
+        <div className='flex items-center justify-between'>
+          <div className='flex items-center gap-[12px]'>
+            <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
+            <Skeleton className='h-[14px] w-[96px] rounded-[4px]' />
+          </div>
+          <div className='flex items-center gap-[6px]'>
+            <Skeleton className='h-[28px] w-[80px] rounded-[6px]' />
+          </div>
+        </div>
+      </div>
+
+      <div className='border-b border-[var(--border)] px-[24px] py-[10px]'>
+        <div className='flex items-center'>
+          <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
+          <Skeleton className='ml-[10px] h-[14px] w-[160px] rounded-[4px]' />
+        </div>
+      </div>
+
+      <div className='min-h-0 flex-1 overflow-auto'>
+        <table className='w-full'>
+          <thead>
+            <tr className='border-b border-[var(--border)]'>
+              <th className='w-[40px] px-[12px] py-[8px]'>
+                <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
+              </th>
+              {Array.from({ length: COLUMN_COUNT }).map((_, i) => (
+                <th key={i} className='px-[12px] py-[8px] text-left'>
+                  <Skeleton className='h-[12px] w-[56px] rounded-[4px]' />
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {Array.from({ length: SKELETON_ROW_COUNT }).map((_, rowIndex) => (
+              <tr key={rowIndex} className='border-b border-[var(--border)]'>
+                <td className='w-[40px] px-[12px] py-[10px]'>
+                  <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
+                </td>
+                {Array.from({ length: COLUMN_COUNT }).map((_, colIndex) => (
+                  <td key={colIndex} className='px-[12px] py-[10px]'>
+                    <Skeleton
+                      className='h-[14px] rounded-[4px]'
+                      style={{ width: colIndex === 0 ? '128px' : '80px' }}
+                    />
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}

apps/sim/app/workspace/[workspaceId]/logs/loading.tsx

@@ -0,0 +1,71 @@
+import { Skeleton } from '@/components/emcn'
+
+const SKELETON_ROW_COUNT = 5
+const COLUMN_COUNT = 6
+
+export default function LogsLoading() {
+  return (
+    <div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
+      <div className='border-b border-[var(--border)] px-[24px] py-[10px]'>
+        <div className='flex items-center justify-between'>
+          <div className='flex items-center gap-[12px]'>
+            <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
+            <Skeleton className='h-[14px] w-[32px] rounded-[4px]' />
+          </div>
+          <div className='flex items-center gap-[6px]'>
+            <Skeleton className='h-[28px] w-[64px] rounded-[6px]' />
+            <Skeleton className='h-[28px] w-[96px] rounded-[6px]' />
+            <Skeleton className='h-[28px] w-[28px] rounded-[6px]' />
+            <Skeleton className='h-[28px] w-[56px] rounded-[6px]' />
+            <Skeleton className='h-[28px] w-[72px] rounded-[6px]' />
+          </div>
+        </div>
+      </div>
+      <div className='border-b border-[var(--border)] px-[24px] py-[10px]'>
+        <div className='flex items-center justify-between'>
+          <div className='flex items-center'>
+            <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
+            <Skeleton className='ml-[10px] h-[14px] w-[120px] rounded-[4px]' />
+          </div>
+          <div className='flex items-center gap-[6px]'>
+            <Skeleton className='h-[28px] w-[56px] rounded-[6px]' />
+            <Skeleton className='h-[28px] w-[56px] rounded-[6px]' />
+          </div>
+        </div>
+      </div>
+      <div className='min-h-0 flex-1 overflow-auto'>
+        <table className='w-full'>
+          <thead>
+            <tr className='border-b border-[var(--border)]'>
+              <th className='w-[40px] px-[12px] py-[8px]'>
+                <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
+              </th>
+              {Array.from({ length: COLUMN_COUNT }).map((_, i) => (
+                <th key={i} className='px-[12px] py-[8px] text-left'>
+                  <Skeleton className='h-[12px] w-[56px] rounded-[4px]' />
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {Array.from({ length: SKELETON_ROW_COUNT }).map((_, rowIndex) => (
+              <tr key={rowIndex} className='border-b border-[var(--border)]'>
+                <td className='w-[40px] px-[12px] py-[10px]'>
+                  <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
+                </td>
+                {Array.from({ length: COLUMN_COUNT }).map((_, colIndex) => (
+                  <td key={colIndex} className='px-[12px] py-[10px]'>
+                    <Skeleton
+                      className='h-[14px] rounded-[4px]'
+                      style={{ width: colIndex === 0 ? '128px' : '80px' }}
+                    />
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}

apps/sim/app/workspace/[workspaceId]/scheduled-tasks/loading.tsx

@@ -0,0 +1,63 @@
+import { Skeleton } from '@/components/emcn'
+
+const SKELETON_ROW_COUNT = 5
+const COLUMN_COUNT = 4
+
+export default function ScheduledTasksLoading() {
+  return (
+    <div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
+      <div className='border-b border-[var(--border)] px-[24px] py-[10px]'>
+        <div className='flex items-center justify-between'>
+          <div className='flex items-center gap-[12px]'>
+            <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
+            <Skeleton className='h-[14px] w-[104px] rounded-[4px]' />
+          </div>
+          <div className='flex items-center gap-[6px]'>
+            <Skeleton className='h-[28px] w-[136px] rounded-[6px]' />
+          </div>
+        </div>
+      </div>
+      <div className='border-b border-[var(--border)] px-[24px] py-[10px]'>
+        <div className='flex items-center'>
+          <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
+          <Skeleton className='ml-[10px] h-[14px] w-[160px] rounded-[4px]' />
+        </div>
+      </div>
+      <div className='min-h-0 flex-1 overflow-auto'>
+        <table className='w-full'>
+          <thead>
+            <tr className='border-b border-[var(--border)]'>
+              <th className='w-[40px] px-[12px] py-[8px]'>
+                <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
+              </th>
+              {Array.from({ length: COLUMN_COUNT }).map((_, i) => (
+                <th key={i} className='px-[12px] py-[8px] text-left'>
+                  <Skeleton className='h-[12px] w-[56px] rounded-[4px]' />
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {Array.from({ length: SKELETON_ROW_COUNT }).map((_, rowIndex) => (
+              <tr key={rowIndex} className='border-b border-[var(--border)]'>
+                <td className='w-[40px] px-[12px] py-[10px]'>
+                  <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
+                </td>
+                {Array.from({ length: COLUMN_COUNT }).map((_, colIndex) => (
+                  <td key={colIndex} className='px-[12px] py-[10px]'>
+                    <Skeleton
+                      className='h-[14px] rounded-[4px]'
+                      style={{
+                        width: colIndex === 0 ? '128px' : colIndex === 1 ? '160px' : '80px',
+                      }}
+                    />
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}

apps/sim/app/workspace/[workspaceId]/settings/[section]/loading.tsx

@@ -0,0 +1,15 @@
+import { Skeleton } from '@/components/emcn'
+
+export default function SettingsLoading() {
+  return (
+    <div>
+      <Skeleton className='mb-[28px] h-[28px] w-[140px] rounded-[4px]' />
+      <div className='flex flex-col gap-[16px]'>
+        <Skeleton className='h-[20px] w-[200px] rounded-[4px]' />
+        <Skeleton className='h-[40px] w-full rounded-[8px]' />
+        <Skeleton className='h-[40px] w-full rounded-[8px]' />
+        <Skeleton className='h-[40px] w-full rounded-[8px]' />
+      </div>
+    </div>
+  )
+}

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/loading.tsx

@@ -0,0 +1,51 @@
+import { Skeleton } from '@/components/emcn'
+
+const SKELETON_ROW_COUNT = 8
+const COLUMN_COUNT = 5
+
+export default function TableDetailLoading() {
+  return (
+    <div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
+      <div className='border-b border-[var(--border)] px-[16px] py-[8.5px]'>
+        <div className='flex items-center justify-between'>
+          <div className='flex items-center gap-[8px]'>
+            <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
+            <Skeleton className='h-[14px] w-[44px] rounded-[4px]' />
+            <Skeleton className='h-[14px] w-[8px] rounded-[2px]' />
+            <Skeleton className='h-[14px] w-[100px] rounded-[4px]' />
+          </div>
+          <div className='flex items-center gap-[6px]'>
+            <Skeleton className='h-[28px] w-[80px] rounded-[6px]' />
+          </div>
+        </div>
+      </div>
+      <div className='min-h-0 flex-1 overflow-auto'>
+        <table className='w-full'>
+          <thead>
+            <tr className='border-b border-[var(--border)]'>
+              {Array.from({ length: COLUMN_COUNT }).map((_, i) => (
+                <th key={i} className='px-[12px] py-[8px] text-left'>
+                  <Skeleton className='h-[12px] w-[72px] rounded-[4px]' />
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {Array.from({ length: SKELETON_ROW_COUNT }).map((_, rowIndex) => (
+              <tr key={rowIndex} className='border-b border-[var(--border)]'>
+                {Array.from({ length: COLUMN_COUNT }).map((_, colIndex) => (
+                  <td key={colIndex} className='px-[12px] py-[10px]'>
+                    <Skeleton
+                      className='h-[14px] rounded-[4px]'
+                      style={{ width: `${80 + (colIndex % 3) * 40}px` }}
+                    />
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}

apps/sim/app/workspace/[workspaceId]/tables/loading.tsx

@@ -0,0 +1,61 @@
+import { Skeleton } from '@/components/emcn'
+
+const SKELETON_ROW_COUNT = 5
+const COLUMN_COUNT = 6
+
+export default function TablesLoading() {
+  return (
+    <div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
+      <div className='border-b border-[var(--border)] px-[24px] py-[10px]'>
+        <div className='flex items-center justify-between'>
+          <div className='flex items-center gap-[12px]'>
+            <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
+            <Skeleton className='h-[14px] w-[44px] rounded-[4px]' />
+          </div>
+          <div className='flex items-center gap-[6px]'>
+            <Skeleton className='h-[28px] w-[80px] rounded-[6px]' />
+          </div>
+        </div>
+      </div>
+      <div className='border-b border-[var(--border)] px-[24px] py-[10px]'>
+        <div className='flex items-center'>
+          <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
+          <Skeleton className='ml-[10px] h-[14px] w-[120px] rounded-[4px]' />
+        </div>
+      </div>
+      <div className='min-h-0 flex-1 overflow-auto'>
+        <table className='w-full'>
+          <thead>
+            <tr className='border-b border-[var(--border)]'>
+              <th className='w-[40px] px-[12px] py-[8px]'>
+                <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
+              </th>
+              {Array.from({ length: COLUMN_COUNT }).map((_, i) => (
+                <th key={i} className='px-[12px] py-[8px] text-left'>
+                  <Skeleton className='h-[12px] w-[56px] rounded-[4px]' />
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {Array.from({ length: SKELETON_ROW_COUNT }).map((_, rowIndex) => (
+              <tr key={rowIndex} className='border-b border-[var(--border)]'>
+                <td className='w-[40px] px-[12px] py-[10px]'>
+                  <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
+                </td>
+                {Array.from({ length: COLUMN_COUNT }).map((_, colIndex) => (
+                  <td key={colIndex} className='px-[12px] py-[10px]'>
+                    <Skeleton
+                      className='h-[14px] rounded-[4px]'
+                      style={{ width: colIndex === 0 ? '128px' : '80px' }}
+                    />
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}

apps/sim/app/workspace/[workspaceId]/templates/[id]/loading.tsx

@@ -0,0 +1,47 @@
+import { Skeleton } from '@/components/emcn'
+
+export default function TemplateDetailLoading() {
+  return (
+    <div className='flex h-full flex-1 flex-col overflow-hidden'>
+      <div className='flex flex-1 overflow-hidden'>
+        <div className='flex flex-1 flex-col overflow-auto bg-white px-[24px] pt-[24px] pb-[24px] dark:bg-[var(--bg)]'>
+          <div className='flex items-center gap-[8px]'>
+            <Skeleton className='h-[14px] w-[72px] rounded-[4px]' />
+            <Skeleton className='h-[14px] w-[8px] rounded-[2px]' />
+            <Skeleton className='h-[14px] w-[120px] rounded-[4px]' />
+          </div>
+          <div className='mt-[14px] flex items-center justify-between'>
+            <Skeleton className='h-[27px] w-[250px] rounded-[4px]' />
+            <div className='flex items-center gap-[8px]'>
+              <Skeleton className='h-[32px] w-[80px] rounded-[6px]' />
+              <Skeleton className='h-[32px] w-[80px] rounded-[6px]' />
+            </div>
+          </div>
+          <Skeleton className='mt-[4px] h-[16px] w-[360px] rounded-[4px]' />
+          <div className='mt-[16px] flex items-center gap-[8px]'>
+            <Skeleton className='h-[16px] w-[48px] rounded-[4px]' />
+            <Skeleton className='h-[16px] w-[48px] rounded-[4px]' />
+            <Skeleton className='h-[16px] w-[1px] rounded-[1px]' />
+            <Skeleton className='h-[20px] w-[20px] rounded-full' />
+            <Skeleton className='h-[16px] w-[80px] rounded-[4px]' />
+          </div>
+          <Skeleton className='mt-[24px] h-[450px] w-full rounded-[8px]' />
+          <Skeleton className='mt-[32px] h-[20px] w-[180px] rounded-[4px]' />
+          <div className='mt-[12px] space-y-[8px]'>
+            <Skeleton className='h-[14px] w-full rounded-[4px]' />
+            <Skeleton className='h-[14px] w-[85%] rounded-[4px]' />
+            <Skeleton className='h-[14px] w-[70%] rounded-[4px]' />
+          </div>
+          <Skeleton className='mt-[32px] h-[20px] w-[160px] rounded-[4px]' />
+          <div className='mt-[12px] flex items-center gap-[12px]'>
+            <Skeleton className='h-[48px] w-[48px] rounded-full' />
+            <div className='space-y-[6px]'>
+              <Skeleton className='h-[16px] w-[120px] rounded-[4px]' />
+              <Skeleton className='h-[14px] w-[200px] rounded-[4px]' />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

apps/sim/app/workspace/[workspaceId]/templates/loading.tsx

@@ -0,0 +1,38 @@
+import { Skeleton } from '@/components/emcn'
+
+const SKELETON_CARD_COUNT = 8
+
+export default function TemplatesLoading() {
+  return (
+    <div className='flex h-full flex-1 flex-col'>
+      <div className='flex flex-1 overflow-hidden'>
+        <div className='flex flex-1 flex-col overflow-auto bg-[var(--bg)] px-[24px] pt-[28px] pb-[24px]'>
+          <div className='flex items-center gap-[12px]'>
+            <Skeleton className='h-[26px] w-[26px] rounded-[6px]' />
+            <Skeleton className='h-[22px] w-[80px] rounded-[4px]' />
+          </div>
+          <Skeleton className='mt-[6px] h-[14px] w-[280px] rounded-[4px]' />
+
+          <div className='mt-[14px] flex items-center justify-between'>
+            <Skeleton className='h-[32px] w-[400px] rounded-[8px]' />
+            <div className='flex items-center gap-[8px]'>
+              <Skeleton className='h-[32px] w-[64px] rounded-[6px]' />
+              <Skeleton className='h-[32px] w-[100px] rounded-[6px]' />
+            </div>
+          </div>
+          <div className='mt-[24px] grid grid-cols-1 gap-x-[20px] gap-y-[40px] md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'>
+            {Array.from({ length: SKELETON_CARD_COUNT }).map((_, i) => (
+              <div key={i} className='h-[268px] w-full rounded-[8px] bg-[var(--surface-3)] p-[8px]'>
+                <Skeleton className='h-[180px] w-full rounded-[6px]' />
+                <div className='mt-[10px] px-[4px]'>
+                  <Skeleton className='h-[14px] w-[120px] rounded-[4px]' />
+                  <Skeleton className='mt-[6px] h-[12px] w-[180px] rounded-[4px]' />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/loading.tsx

@@ -0,0 +1,11 @@
+import { Loader2 } from 'lucide-react'
+
+export default function WorkflowLoading() {
+  return (
+    <div className='flex h-full w-full flex-col overflow-hidden bg-[var(--bg)]'>
+      <div className='relative flex h-full w-full flex-1 items-center justify-center bg-[var(--bg)]'>
+        <Loader2 className='h-[20px] w-[20px] animate-spin text-[var(--text-tertiary)]' />
+      </div>
+    </div>
+  )
+}

apps/sim/app/workspace/[workspaceId]/w/loading.tsx

@@ -0,0 +1,11 @@
+import { Loader2 } from 'lucide-react'
+
+export default function WorkflowsLoading() {
+  return (
+    <div className='flex h-full w-full flex-col overflow-hidden bg-[var(--bg)]'>
+      <div className='relative flex h-full w-full flex-1 items-center justify-center bg-[var(--bg)]'>
+        <Loader2 className='h-[20px] w-[20px] animate-spin text-[var(--text-tertiary)]' />
+      </div>
+    </div>
+  )
+}