feat(loading) show route specific skeleton UI

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,39 @@
+import { Skeleton } from '@/components/emcn'
+
+export default function BlogPostLoading() {
+  return (
+    <article className='w-full'>
+      <div className='mx-auto max-w-[1450px] px-6 pt-8'>
+        <Skeleton className='h-[16px] w-[60px] rounded-[4px]' />
+        <div className='mt-[24px] flex flex-col gap-8 md:flex-row md:gap-12'>
+          <Skeleton className='aspect-[4/3] w-full rounded-[8px] md:w-[450px]' />
+          <div className='flex flex-1 flex-col justify-center'>
+            <Skeleton className='h-[48px] w-full rounded-[4px]' />
+            <Skeleton className='mt-[8px] h-[48px] w-[80%] rounded-[4px]' />
+            <div className='mt-[24px] flex items-center gap-[12px]'>
+              <Skeleton className='h-[32px] w-[32px] rounded-full' />
+              <Skeleton className='h-[16px] w-[100px] rounded-[4px]' />
+            </div>
+          </div>
+        </div>
+        <Skeleton className='mt-[32px] h-[1px] w-full rounded-[1px]' />
+        <div className='mt-[16px] flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between'>
+          <Skeleton className='h-[14px] w-[120px] rounded-[4px]' />
+          <Skeleton className='h-[14px] w-[300px] rounded-[4px]' />
+        </div>
+      </div>
+      <div className='mx-auto max-w-[900px] px-6 pt-[48px] pb-20'>
+        <div className='space-y-[16px]'>
+          <Skeleton className='h-[16px] w-full rounded-[4px]' />
+          <Skeleton className='h-[16px] w-[95%] rounded-[4px]' />
+          <Skeleton className='h-[16px] w-[88%] rounded-[4px]' />
+          <Skeleton className='h-[16px] w-full rounded-[4px]' />
+          <Skeleton className='mt-[24px] h-[24px] w-[200px] rounded-[4px]' />
+          <Skeleton className='h-[16px] w-full rounded-[4px]' />
+          <Skeleton className='h-[16px] w-[92%] rounded-[4px]' />
+          <Skeleton className='h-[16px] w-[85%] rounded-[4px]' />
+        </div>
+      </div>
+    </article>
+  )
+}

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

@@ -0,0 +1,23 @@
+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='flex items-center gap-[12px]'>
+        <Skeleton className='h-[40px] w-[40px] rounded-full' />
+        <Skeleton className='h-[28px] w-[160px] rounded-[4px]' />
+      </div>
+      <div className='mt-[32px] grid grid-cols-1 gap-8 sm:grid-cols-2'>
+        {Array.from({ length: SKELETON_POST_COUNT }).map((_, i) => (
+          <div key={i} className='flex flex-col gap-[12px]'>
+            <Skeleton className='aspect-[16/10] w-full rounded-[8px]' />
+            <Skeleton className='h-[14px] w-[80px] rounded-[4px]' />
+            <Skeleton className='h-[20px] w-[200px] rounded-[4px]' />
+          </div>
+        ))}
+      </div>
+    </main>
+  )
+}

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

@@ -0,0 +1,23 @@
+import { Skeleton } from '@/components/emcn'
+
+const SKELETON_CARD_COUNT = 6
+
+export default function StudioLoading() {
+  return (
+    <main className='mx-auto max-w-[1200px] px-6 py-12 sm:px-8 md:px-12'>
+      <Skeleton className='h-[48px] w-[200px] rounded-[4px]' />
+      <Skeleton className='mt-[8px] h-[20px] w-[360px] rounded-[4px]' />
+      <div className='mt-[32px] grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3'>
+        {Array.from({ length: SKELETON_CARD_COUNT }).map((_, i) => (
+          <div key={i} className='flex flex-col gap-[12px]'>
+            <Skeleton className='aspect-[16/10] w-full rounded-[8px]' />
+            <Skeleton className='h-[14px] w-[80px] rounded-[4px]' />
+            <Skeleton className='h-[20px] w-[200px] rounded-[4px]' />
+            <Skeleton className='h-[14px] w-full rounded-[4px]' />
+            <Skeleton className='h-[14px] w-[70%] rounded-[4px]' />
+          </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='h-[38px] w-[180px] rounded-[4px]' />
+      <div className='mt-[24px] flex flex-wrap gap-3'>
+        {Array.from({ length: SKELETON_TAG_COUNT }).map((_, i) => (
+          <Skeleton
+            key={i}
+            className='h-[30px] rounded-full'
+            style={{ width: `${60 + (i % 4) * 24}px` }}
+          />
+        ))}
+      </div>
+    </main>
+  )
+}

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

@@ -0,0 +1,22 @@
+import { Skeleton } from '@/components/emcn'
+
+export default function PrivacyLoading() {
+  return (
+    <main className='min-h-screen bg-white text-gray-900'>
+      <div className='px-12 pt-[40px] pb-[40px]'>
+        <Skeleton className='mx-auto h-[48px] w-[240px] rounded-[4px]' />
+        <div className='prose prose-gray mx-auto mt-[32px] space-y-8'>
+          {Array.from({ length: 4 }).map((_, i) => (
+            <div key={i} className='space-y-[12px]'>
+              <Skeleton className='h-[24px] w-[200px] rounded-[4px]' />
+              <Skeleton className='h-[16px] w-full rounded-[4px]' />
+              <Skeleton className='h-[16px] w-[95%] rounded-[4px]' />
+              <Skeleton className='h-[16px] w-[88%] rounded-[4px]' />
+              <Skeleton className='h-[16px] w-full rounded-[4px]' />
+            </div>
+          ))}
+        </div>
+      </div>
+    </main>
+  )
+}

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

@@ -0,0 +1,22 @@
+import { Skeleton } from '@/components/emcn'
+
+export default function TermsLoading() {
+  return (
+    <main className='min-h-screen bg-white text-gray-900'>
+      <div className='px-12 pt-[40px] pb-[40px]'>
+        <Skeleton className='mx-auto h-[48px] w-[280px] rounded-[4px]' />
+        <div className='prose prose-gray mx-auto mt-[32px] space-y-8'>
+          {Array.from({ length: 4 }).map((_, i) => (
+            <div key={i} className='space-y-[12px]'>
+              <Skeleton className='h-[24px] w-[200px] rounded-[4px]' />
+              <Skeleton className='h-[16px] w-full rounded-[4px]' />
+              <Skeleton className='h-[16px] w-[95%] rounded-[4px]' />
+              <Skeleton className='h-[16px] w-[88%] rounded-[4px]' />
+              <Skeleton className='h-[16px] w-full rounded-[4px]' />
+            </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 bg-background'>
+      <div className='grid md:grid-cols-2'>
+        <div className='relative p-8 md:sticky md:top-0 md:h-dvh md:p-12'>
+          <div className='flex h-full flex-col justify-center'>
+            <Skeleton className='h-[48px] w-[200px] rounded-[4px]' />
+            <Skeleton className='mt-[16px] h-[16px] w-[300px] rounded-[4px]' />
+            <Skeleton className='mt-[4px] h-[16px] w-[260px] rounded-[4px]' />
+            <Skeleton className='mt-[24px] h-[1px] w-full rounded-[1px]' />
+            <div className='mt-[24px] space-y-[12px]'>
+              <Skeleton className='h-[16px] w-[140px] rounded-[4px]' />
+              <Skeleton className='h-[16px] w-[120px] rounded-[4px]' />
+              <Skeleton className='h-[16px] w-[100px] rounded-[4px]' />
+            </div>
+          </div>
+        </div>
+        <div className='p-8 pl-8 md:p-12'>
+          <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]' />
+                <Skeleton className='h-[14px] w-[100px] rounded-[4px]' />
+                <div className='space-y-[8px]'>
+                  <Skeleton className='h-[14px] w-full rounded-[4px]' />
+                  <Skeleton className='h-[14px] w-[90%] rounded-[4px]' />
+                  <Skeleton className='h-[14px] w-[75%] rounded-[4px]' />
+                </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>
+  )
+}