ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

feat: enhance loading state and organization selection UI on welcome page

Browse Source
This commit is contained in:
Usman Baig
2026-02-08 21:38:46 +01:00
parent 3e8edd188a
commit 2f42f4eb98
1 changed files with 59 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
app/welcome/page.tsx
View File

@@ -368,50 +368,73 @@ function WelcomeContent() {
className={cardClass}
>
{orgsLoading ? (
<div className="text-center py-8">
<p className="text-neutral-600 dark:text-neutral-400">Loading your workspaces...</p>
<div className="text-center py-12">
<div className="mx-auto h-8 w-8 border-2 border-brand-orange border-t-transparent rounded-full animate-spin mb-4" />
<p className="text-neutral-600 dark:text-neutral-400">Loading your organizations...</p>
</div>
) : organizations && organizations.length > 0 ? (
<>
<div className="text-center mb-6">
<div className="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-brand-orange/10 text-brand-orange mb-4">
<BarChartIcon className="h-7 w-7" />
<div className="text-center mb-8">
<div className="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-brand-orange/20 to-brand-orange/5 text-brand-orange mb-5 shadow-sm">
<BarChartIcon className="h-8 w-8" />
</div>
<h2 className="text-xl font-bold text-neutral-900 dark:text-white">
Choose your workspace
<h2 className="text-2xl font-bold tracking-tight text-neutral-900 dark:text-white">
Choose your organization
</h2>
<p className="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
Continue with an existing workspace or create a new one.
<p className="mt-2 text-sm text-neutral-500 dark:text-neutral-400 max-w-sm mx-auto">
Continue with an existing one or create a new organization.
</p>
</div>
<div className="space-y-2 mb-6">
{organizations.map((org) => (
<button
key={org.organization_id}
type="button"
onClick={() => handleSelectWorkspace(org)}
disabled={!!switchingOrgId}
className="w-full flex items-center justify-between gap-3 rounded-xl border border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-800/50 hover:bg-neutral-100 dark:hover:bg-neutral-800 hover:border-brand-orange/50 px-4 py-3 text-left transition-colors disabled:opacity-60"
>
<span className="font-medium text-neutral-900 dark:text-white">
{org.organization_name || 'Workspace'}
</span>
{user?.org_id === org.organization_id && (
<span className="text-xs text-neutral-500 dark:text-neutral-400">Current</span>
)}
<ArrowRightIcon className="h-4 w-4 text-neutral-400 flex-shrink-0" />
</button>
))}
<div className="space-y-2.5 mb-6">
{organizations.map((org, index) => {
const isCurrent = user?.org_id === org.organization_id
const initial = (org.organization_name || 'O').charAt(0).toUpperCase()
return (
<motion.button
key={org.organization_id}
type="button"
onClick={() => handleSelectWorkspace(org)}
disabled={!!switchingOrgId}
initial={{ opacity: 0, y: 8 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: index * 0.04, duration: 0.2 }}
className={`w-full flex items-center gap-3 rounded-xl border px-4 py-3.5 text-left transition-all duration-200 disabled:opacity-60 ${
isCurrent
? 'border-brand-orange/60 bg-brand-orange/5 dark:bg-brand-orange/10 shadow-sm'
: 'border-neutral-200 dark:border-neutral-700 bg-neutral-50/80 dark:bg-neutral-800/50 hover:bg-neutral-100 dark:hover:bg-neutral-800 hover:border-neutral-300 dark:hover:border-neutral-600 hover:shadow-sm'
}`}
>
<div
className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-xl text-sm font-semibold ${
isCurrent
? 'bg-brand-orange/20 text-brand-orange dark:bg-brand-orange/30'
: 'bg-neutral-200/80 dark:bg-neutral-700 text-neutral-600 dark:text-neutral-300'
}`}
>
{initial}
</div>
<span className="flex-1 font-medium text-neutral-900 dark:text-white truncate">
{org.organization_name || 'Organization'}
</span>
{isCurrent && (
<span className="text-xs font-medium text-brand-orange shrink-0">Current</span>
)}
<ArrowRightIcon className={`h-4 w-4 shrink-0 ${isCurrent ? 'text-brand-orange' : 'text-neutral-400'}`} />
</motion.button>
)
})}
</div>
<div className="pt-2 border-t border-neutral-100 dark:border-neutral-800">
<Button
type="button"
variant="secondary"
className="w-full border border-dashed border-neutral-300 dark:border-neutral-600 hover:border-brand-orange/50 hover:bg-brand-orange/5 dark:hover:bg-brand-orange/10"
onClick={handleCreateNewWorkspace}
>
<PlusIcon className="h-4 w-4 mr-2" />
Create a new organization
</Button>
</div>
<Button
type="button"
variant="secondary"
className="w-full"
onClick={handleCreateNewWorkspace}
>
<PlusIcon className="h-4 w-4 mr-2" />
Create a new workspace
</Button>
</>
) : (
<div className="text-center">