open the code step at once and let the SMS request finish in the background

Kavenegar sends the SMS early but answers our API up to 16 s later
(2026-09-27), and the login screen waited for that answer. The server
stores the code before calling Kavenegar, so the code works immediately
(checked against a local server with an 8 s send: login 200 at 1.5 s).
Real failures still show on the code step, and resend unlocks at once.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/screens/LoginScreen.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { ChevronRight, Phone } from 'lucide-react';
-import { api } from '@/api';
+import { api, ApiError } from '@/api';
 import { InlineError, PrimaryButton } from '@/components/ui';
 import { SeyarMascot } from '@/mascots/SeyarMascot';
 import { friendlyError } from '@/lib/errors';
@@ -30,9 +30,13 @@ export function LoginScreen({
   const [phone, setPhone] = useState('');
   const [otp, setOtp] = useState('');
   const [devOtp, setDevOtp] = useState<string | null>(null);
-  const [loading, setLoading] = useState<'otp' | 'login' | 'guest' | null>(null);
+  const [loading, setLoading] = useState<'login' | 'guest' | null>(null);
   const [error, setError] = useState('');
   const [resendIn, setResendIn] = useState(0);
+  /** درخواستِ پیامک هنوز جواب نداده؛ جدا از `loading` تا واردکردنِ کد قفل نشود. */
+  const [sending, setSending] = useState(false);
+  /** شماره‌ی آخرین درخواست؛ جوابِ دیرِ درخواستِ قدیمی‌تر نادیده گرفته می‌شود. */
+  const attempt = useRef(0);
   const otpInput = useRef<HTMLInputElement>(null);
 
   const phoneValid = /^09\d{9}$/.test(phone);
@@ -48,20 +52,37 @@ export function LoginScreen({
     if (step === 'otp') otpInput.current?.focus();
   }, [step]);
 
+  /**
+   * صفحه‌ی کد فوراً باز می‌شود و درخواست در پس‌زمینه جلو می‌رود. سرور کد را پیش از
+   * تماس با کاوه‌نگار ذخیره می‌کند، پس کدِ رسیده همان لحظه قابلِ تأیید است؛ ولی
+   * جوابِ کاوه‌نگار گاهی بعد از رسیدنِ پیامک می‌آید (۱۶ ثانیه در ۲۰۲۶-۰۹-۲۷) و
+   * منتظر ماندن برایش کاربر را بی‌دلیل معطل می‌کرد.
+   */
   async function requestOtp() {
-    if (!phoneValid || loading) return;
+    if (!phoneValid || sending || loading) return;
+    const mine = ++attempt.current;
     setError('');
-    setLoading('otp');
-    try {
-      const data = await api.auth.requestOtp(phone);
-      setDevOtp(data.devOtp ?? null);
+    setDevOtp(null);
     setOtp('');
     setStep('otp');
     setResendIn(RESEND_SECONDS);
+    setSending(true);
+    try {
+      const data = await api.auth.requestOtp(phone);
+      if (mine !== attempt.current) return;
+      setDevOtp(data.devOtp ?? null);
     } catch (err) {
+      if (mine !== attempt.current) return;
       setError(friendlyError(err, 'ارسالِ کد انجام نشد، دوباره امتحان کن'));
+      if (err instanceof ApiError && err.status === 400) {
+        setStep('phone'); // شماره را سرور نپذیرفت؛ برگرد تا اصلاحش کند
+      } else if (err instanceof ApiError && err.isRateLimited && err.retryAfterMs) {
+        setResendIn(Math.ceil(err.retryAfterMs / 1000));
+      } else {
+        setResendIn(0); // پیامکی نرفت و سرور cooldown را برداشته؛ همین حالا دوباره بفرستد
+      }
     } finally {
-      setLoading(null);
+      if (mine === attempt.current) setSending(false);
     }
   }
 
@@ -166,16 +187,19 @@ export function LoginScreen({
                 }`}
               />
             </label>
+            {sending && !error && (
+              <p className="mt-2 text-xs text-muted">پیامک در راهه؛ همین که رسید کد رو بزن</p>
+            )}
             {devOtp && (
               <p className="mt-2 text-xs text-muted">
                 کدِ آزمایشیِ حالتِ توسعه: <span dir="ltr" className="font-bold text-coral">{devOtp}</span>
               </p>
             )}
             <div className="mt-3 flex items-center justify-between text-xs font-bold">
-              <button type="button" className="flex items-center gap-1 text-coral" onClick={() => { setStep('phone'); setError(''); setDevOtp(null); }}>
+              <button type="button" className="flex items-center gap-1 text-coral" onClick={() => { attempt.current++; setSending(false); setStep('phone'); setError(''); setDevOtp(null); }}>
                 <Phone size={12} /> <span dir="ltr">{toFa(phone)}</span> · اصلاح
               </button>
-              <button type="button" disabled={resendIn > 0 || loading !== null} onClick={() => void requestOtp()} className="text-coral disabled:text-muted">
+              <button type="button" disabled={resendIn > 0 || sending || loading !== null} onClick={() => void requestOtp()} className="text-coral disabled:text-muted">
                 {resendIn > 0 ? `ارسالِ دوباره تا ${toFa(resendIn)} ثانیه` : 'ارسالِ دوباره'}
               </button>
             </div>
@@ -187,7 +211,7 @@ export function LoginScreen({
         <div className="mt-auto flex flex-col gap-3">
           <PrimaryButton
             type="submit"
-            loading={loading === 'otp' || loading === 'login'}
+            loading={loading === 'login'}
             disabled={step === 'phone' ? !phoneValid : !otpValid}
           >
             {step === 'phone' ? 'دریافتِ کدِ تأیید' : 'ورود'}