Skip to content

feat: add loading states for as most of the states arent accurate #3671

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
adithyaakrishna wants to merge 2 commits into
base: staging
Choose a base branch
from
Open

feat: add loading states for as most of the states arent accurate #3671

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5716eb7
chore: fix conflicts
adithyaakrishna Mar 19, 2026
6391bed
chore: updated loading states
adithyaakrishna Mar 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions apps/sim/app/(auth)/login/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
)
}
21 changes: 21 additions & 0 deletions apps/sim/app/(auth)/oauth/consent/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
)
}
16 changes: 16 additions & 0 deletions apps/sim/app/(auth)/reset-password/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
)
}
28 changes: 28 additions & 0 deletions apps/sim/app/(auth)/signup/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
)
}
16 changes: 16 additions & 0 deletions apps/sim/app/(auth)/sso/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
)
}
12 changes: 12 additions & 0 deletions apps/sim/app/(auth)/verify/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
)
}
59 changes: 59 additions & 0 deletions apps/sim/app/(landing)/blog/[slug]/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
)
}
25 changes: 25 additions & 0 deletions apps/sim/app/(landing)/blog/authors/[id]/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
)
}
29 changes: 29 additions & 0 deletions apps/sim/app/(landing)/blog/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
)
}
20 changes: 20 additions & 0 deletions apps/sim/app/(landing)/blog/tags/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
)
}
59 changes: 59 additions & 0 deletions apps/sim/app/(landing)/privacy/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
)
}
52 changes: 52 additions & 0 deletions apps/sim/app/(landing)/terms/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
)
}
Loading
Loading