feat(mothership): draft persistence, new task eager creation, doc preview fix, and loading polish

apps/sim/app/(auth)/login/login-form.tsx

@@ -2,12 +2,13 @@
 
 import { useEffect, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { Eye, EyeOff, Loader2 } from 'lucide-react'
+import { Eye, EyeOff } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter, useSearchParams } from 'next/navigation'
 import {
  Input,
  Label,
+ Loader,
  Modal,
  ModalBody,
  ModalContent,
@@ -455,7 +456,7 @@ export default function LoginPage({
  <button type='submit' disabled={isLoading} className={AUTH_SUBMIT_BTN}>
  {isLoading ? (
  <span className='flex items-center gap-2'>
- <Loader2 className='h-4 w-4 animate-spin' />
+ <Loader className='h-4 w-4' animate />
  Signing in...
  </span>
  ) : (
@@ -570,7 +571,7 @@ export default function LoginPage({
  <button type='submit' disabled={isSubmittingReset} className={AUTH_SUBMIT_BTN}>
  {isSubmittingReset ? (
  <span className='flex items-center gap-2'>
- <Loader2 className='h-4 w-4 animate-spin' />
+ <Loader className='h-4 w-4' animate />
  Sending...
  </span>
  ) : (

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

@@ -1,10 +1,10 @@
 'use client'
 
 import { useCallback, useEffect, useState } from 'react'
-import { ArrowLeftRight, Loader2 } from 'lucide-react'
+import { ArrowLeftRight } from 'lucide-react'
 import Image from 'next/image'
 import { useRouter, useSearchParams } from 'next/navigation'
-import { Button } from '@/components/emcn'
+import { Button, Loader } from '@/components/emcn'
 import { signOut, useSession } from '@/lib/auth/auth-client'
 import { AUTH_SUBMIT_BTN } from '@/app/(auth)/components/auth-button-classes'
 
@@ -266,7 +266,7 @@ export default function OAuthConsentPage() {
  >
  {submitting ? (
  <span className='flex items-center gap-2'>
- <Loader2 className='h-4 w-4 animate-spin' />
+ <Loader className='h-4 w-4' animate />
  Authorizing...
  </span>
  ) : (

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

@@ -1,8 +1,8 @@
 'use client'
 
 import { useState } from 'react'
-import { Eye, EyeOff, Loader2 } from 'lucide-react'
-import { Input, Label } from '@/components/emcn'
+import { Eye, EyeOff } from 'lucide-react'
+import { Input, Label, Loader } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 import { AUTH_SUBMIT_BTN } from '@/app/(auth)/components/auth-button-classes'
 
@@ -67,7 +67,7 @@ export function RequestResetForm({
  <button type='submit' disabled={isSubmitting} className={AUTH_SUBMIT_BTN}>
  {isSubmitting ? (
  <span className='flex items-center gap-2'>
- <Loader2 className='h-4 w-4 animate-spin' />
+ <Loader className='h-4 w-4' animate />
  Sending...
  </span>
  ) : (
@@ -232,7 +232,7 @@ export function SetNewPasswordForm({
  <button type='submit' disabled={isSubmitting || !token} className={AUTH_SUBMIT_BTN}>
  {isSubmitting ? (
  <span className='flex items-center gap-2'>
- <Loader2 className='h-4 w-4 animate-spin' />
+ <Loader className='h-4 w-4' animate />
  Resetting...
  </span>
  ) : (

apps/sim/app/(auth)/signup/signup-form.tsx

@@ -3,11 +3,11 @@
 import { Suspense, useEffect, useMemo, useRef, useState } from 'react'
 import { Turnstile, type TurnstileInstance } from '@marsidev/react-turnstile'
 import { createLogger } from '@sim/logger'
-import { Eye, EyeOff, Loader2 } from 'lucide-react'
+import { Eye, EyeOff } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { usePostHog } from 'posthog-js/react'
-import { Input, Label } from '@/components/emcn'
+import { Input, Label, Loader } from '@/components/emcn'
 import { client, useSession } from '@/lib/auth/auth-client'
 import { getEnv, isFalsy, isTruthy } from '@/lib/core/config/env'
 import { validateCallbackUrl } from '@/lib/core/security/input-validation'
@@ -530,7 +530,7 @@ function SignupFormContent({ githubAvailable, googleAvailable, isProduction }: S
  <button type='submit' disabled={isLoading} className={cn('!mt-6', AUTH_SUBMIT_BTN)}>
  {isLoading ? (
  <span className='flex items-center gap-2'>
- <Loader2 className='h-4 w-4 animate-spin' />
+ <Loader className='h-4 w-4' animate />
  Creating account...
  </span>
  ) : (

apps/sim/app/(auth)/verify/verify-content.tsx

@@ -1,9 +1,8 @@
 'use client'
 
 import { Suspense, useEffect, useState } from 'react'
-import { Loader2 } from 'lucide-react'
 import { useRouter } from 'next/navigation'
-import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/emcn'
+import { InputOTP, InputOTPGroup, InputOTPSlot, Loader } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 import { AUTH_SUBMIT_BTN } from '@/app/(auth)/components/auth-button-classes'
 import { useVerification } from '@/app/(auth)/verify/use-verification'
@@ -118,7 +117,7 @@ function VerificationForm({
  >
  {isLoading ? (
  <span className='flex items-center gap-2'>
- <Loader2 className='h-4 w-4 animate-spin' />
+ <Loader className='h-4 w-4' animate />
  Verifying...
  </span>
  ) : (

apps/sim/app/(landing)/components/auth-modal/auth-modal.tsx

@@ -2,10 +2,17 @@
 
 import { useEffect, useMemo, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { Loader2, X } from 'lucide-react'
+import { X } from 'lucide-react'
 import Image from 'next/image'
 import { useRouter } from 'next/navigation'
-import { Modal, ModalClose, ModalContent, ModalTitle, ModalTrigger } from '@/components/emcn'
+import {
+ Loader,
+ Modal,
+ ModalClose,
+ ModalContent,
+ ModalTitle,
+ ModalTrigger,
+} from '@/components/emcn'
 import { GithubIcon, GoogleIcon } from '@/components/icons'
 import { client } from '@/lib/auth/auth-client'
 import { getEnv, isFalsy, isTruthy } from '@/lib/core/config/env'
@@ -142,7 +149,7 @@ export function AuthModal({ children, defaultView = 'login', source }: AuthModal
 
  {!providerStatus ? (
  <div className='flex items-center justify-center py-16'>
- <Loader2 className='h-5 w-5 animate-spin text-[var(--landing-text-muted)]' />
+ <Loader className='h-5 w-5 text-[var(--landing-text-muted)]' animate />
  </div>
  ) : (
  <>

apps/sim/app/academy/(catalog)/[courseSlug]/components/course-progress.tsx

@@ -1,8 +1,9 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { CheckCircle2, Circle, ExternalLink, GraduationCap, Loader2 } from 'lucide-react'
+import { CheckCircle2, Circle, ExternalLink, GraduationCap } from 'lucide-react'
 import Link from 'next/link'
+import { Loader } from '@/components/emcn'
 import { getCompletedLessons } from '@/lib/academy/local-progress'
 import type { Course } from '@/lib/academy/types'
 import { useSession } from '@/lib/auth/auth-client'
@@ -135,7 +136,7 @@ export function CourseProgress({ course, courseSlug }: CourseProgressProps) {
  }
  className='flex items-center gap-2 rounded-[5px] bg-[#ECECEC] px-4 py-2 font-[430] text-[#1C1C1C] text-[13px] transition-colors hover:bg-white disabled:opacity-50'
  >
- {isPending && <Loader2 className='h-3.5 w-3.5 animate-spin' />}
+ {isPending && <Loader className='h-3.5 w-3.5' animate />}
  {isPending ? 'Issuing…' : 'Get certificate'}
  </button>
  ) : (

apps/sim/app/chat/components/auth/email/email-auth.tsx

@@ -3,8 +3,7 @@
 import { useEffect, useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
-import { Loader2 } from 'lucide-react'
-import { Input, InputOTP, InputOTPGroup, InputOTPSlot, Label } from '@/components/emcn'
+import { Input, InputOTP, InputOTPGroup, InputOTPSlot, Label, Loader } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 import { quickValidateEmail } from '@/lib/messaging/email/validation'
 import AuthBackground from '@/app/(auth)/components/auth-background'
@@ -180,7 +179,7 @@ export default function EmailAuth({ identifier }: EmailAuthProps) {
  >
  {requestOtp.isPending ? (
  <span className='flex items-center gap-2'>
- <Loader2 className='h-4 w-4 animate-spin' />
+ <Loader className='h-4 w-4' animate />
  Sending Code...
  </span>
  ) : (
@@ -233,7 +232,7 @@ export default function EmailAuth({ identifier }: EmailAuthProps) {
  >
  {verifyOtp.isPending ? (
  <span className='flex items-center gap-2'>
- <Loader2 className='h-4 w-4 animate-spin' />
+ <Loader className='h-4 w-4' animate />
  Verifying...
  </span>
  ) : (

apps/sim/app/chat/components/auth/password/password-auth.tsx

@@ -3,8 +3,8 @@
 import { useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { toError } from '@sim/utils/errors'
-import { Eye, EyeOff, Loader2 } from 'lucide-react'
-import { Input, Label } from '@/components/emcn'
+import { Eye, EyeOff } from 'lucide-react'
+import { Input, Label, Loader } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 import AuthBackground from '@/app/(auth)/components/auth-background'
 import { AUTH_SUBMIT_BTN } from '@/app/(auth)/components/auth-button-classes'
@@ -135,7 +135,7 @@ export default function PasswordAuth({ identifier }: PasswordAuthProps) {
  >
  {authenticate.isPending ? (
  <span className='flex items-center gap-2'>
- <Loader2 className='h-4 w-4 animate-spin' />
+ <Loader className='h-4 w-4' animate />
  Authenticating...
  </span>
  ) : (

apps/sim/app/chat/components/message/components/file-download.tsx

@@ -3,8 +3,8 @@
 import { useState } from 'react'
 import { createLogger } from '@sim/logger'
 import { sleep } from '@sim/utils/helpers'
-import { ArrowDown, Download, Loader2, Music } from 'lucide-react'
-import { Button } from '@/components/emcn'
+import { ArrowDown, Download, Music } from 'lucide-react'
+import { Button, Loader } from '@/components/emcn'
 import { DefaultFileIcon, getDocumentIcon } from '@/components/icons/document-icons'
 import type { ChatFile } from '@/app/chat/components/message/message'
 
@@ -126,7 +126,7 @@ export function ChatFileDownload({ file }: ChatFileDownloadProps) {
  </div>
  <div className='flex-shrink-0'>
  {isDownloading ? (
- <Loader2 className='h-3.5 w-3.5 animate-spin' />
+ <Loader className='h-3.5 w-3.5' animate />
  ) : (
  <ArrowDown
  className={`h-3.5 w-3.5 transition-opacity ${isHovered ? 'opacity-100' : 'opacity-0'}`}
@@ -176,7 +176,7 @@ export function ChatFileDownloadAll({ files }: ChatFileDownloadAllProps) {
  className='text-[var(--landing-text-muted)] transition-colors hover:bg-[var(--landing-bg-elevated)] disabled:opacity-50'
  >
  {isDownloading ? (
- <Loader2 className='h-3 w-3 animate-spin' strokeWidth={2} />
+ <Loader className='h-3 w-3' animate />
  ) : (
  <Download className='h-3 w-3' strokeWidth={2} />
  )}

apps/sim/app/form/[identifier]/components/password-auth.tsx

@@ -1,8 +1,8 @@
 'use client'
 
 import { useState } from 'react'
-import { Eye, EyeOff, Loader2 } from 'lucide-react'
-import { Input, Label } from '@/components/emcn'
+import { Eye, EyeOff } from 'lucide-react'
+import { Input, Label, Loader } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 import AuthBackground from '@/app/(auth)/components/auth-background'
 import { AUTH_SUBMIT_BTN } from '@/app/(auth)/components/auth-button-classes'
@@ -80,7 +80,7 @@ export function PasswordAuth({ onSubmit, error }: PasswordAuthProps) {
  >
  {isSubmitting ? (
  <span className='flex items-center gap-2'>
- <Loader2 className='h-4 w-4 animate-spin' />
+ <Loader className='h-4 w-4' animate />
  Verifying...
  </span>
  ) : (

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

@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { createLogger } from '@sim/logger'
-import { Loader2 } from 'lucide-react'
+import { Loader } from '@/components/emcn'
 import { martianMono } from '@/app/_styles/fonts/martian-mono/martian-mono'
 import AuthBackground from '@/app/(auth)/components/auth-background'
 import { AUTH_SUBMIT_BTN } from '@/app/(auth)/components/auth-button-classes'
@@ -326,7 +326,7 @@ export default function Form({ identifier }: { identifier: string }) {
  <button type='submit' disabled={isSubmitting} className={AUTH_SUBMIT_BTN}>
  {isSubmitting ? (
  <span className='flex items-center gap-2'>
- <Loader2 className='h-4 w-4 animate-spin' />
+ <Loader className='h-4 w-4' animate />
  Submitting...
  </span>
  ) : (

apps/sim/app/invite/components/status-card.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import { Loader2 } from 'lucide-react'
 import { useRouter } from 'next/navigation'
+import { Loader } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 import { AUTH_PRIMARY_CTA_BASE } from '@/app/(auth)/components/auth-button-classes'
 
@@ -39,7 +39,7 @@ export function InviteStatusCard({
  <p className='font-[380] text-[var(--landing-text-muted)] text-md'>{description}</p>
  </div>
  <div className='mt-8 flex w-full items-center justify-center py-8'>
- <Loader2 className='h-8 w-8 animate-spin text-[var(--landing-text-muted)]' />
+ <Loader className='h-8 w-8 text-[var(--landing-text-muted)]' animate />
  </div>
  </>
  )
@@ -74,7 +74,7 @@ export function InviteStatusCard({
  >
  {action.loading ? (
  <span className='flex items-center gap-2'>
- <Loader2 className='h-4 w-4 animate-spin' />
+ <Loader className='h-4 w-4' animate />
  {action.label}...
  </span>
  ) : (

apps/sim/app/unsubscribe/unsubscribe.tsx

@@ -1,8 +1,8 @@
 'use client'
 
 import { Suspense, useEffect, useState } from 'react'
-import { Loader2 } from 'lucide-react'
 import { useSearchParams } from 'next/navigation'
+import { Loader } from '@/components/emcn'
 import { AUTH_SUBMIT_BTN } from '@/app/(auth)/components/auth-button-classes'
 import { InviteLayout } from '@/app/invite/components'
 
@@ -127,7 +127,7 @@ function UnsubscribeContent() {
  </p>
  </div>
  <div className={'mt-8 flex w-full items-center justify-center py-8'}>
- <Loader2 className='h-8 w-8 animate-spin text-[var(--landing-text-muted)]' />
+ <Loader className='h-8 w-8 text-[var(--landing-text-muted)]' animate />
  </div>
  </InviteLayout>
  )
@@ -218,7 +218,7 @@ function UnsubscribeContent() {
  >
  {processing ? (
  <span className='flex items-center gap-2'>
- <Loader2 className='h-4 w-4 animate-spin' />
+ <Loader className='h-4 w-4' animate />
  Unsubscribing...
  </span>
  ) : isAlreadyUnsubscribedFromAll ? (
@@ -301,7 +301,7 @@ export default function Unsubscribe() {
  </p>
  </div>
  <div className={'mt-8 flex w-full items-center justify-center py-8'}>
- <Loader2 className='h-8 w-8 animate-spin text-[var(--landing-text-muted)]' />
+ <Loader className='h-8 w-8 text-[var(--landing-text-muted)]' animate />
  </div>
  </InviteLayout>
  }