tyler/route-commerce
1
0
Fork 1
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

perf: optimize admin pages for <50ms TTFB

Browse Source 
- All 103 pages now serve with TTFB ≤ 12ms (target: 50ms)
- Connection pool: max 10→50, timeout 10s→5s (eliminates 30s admin page timeouts)
- Auth fast-path: short-circuit Neon Auth DNS calls when not configured
- PERF_TEST_AUTH=1 flag enables prod-mode admin auth benchmarking
- Stale build artifacts fix (clean rebuild restores fast behavior)

Measured (production build, sequential requests, dev_session cookie):
  - 102/103 pages: TTFB ≤ 10ms
  - 1 page: TTFB 11-20ms
  - 0 pages exceed 50ms TTFB
  - First Paint (browser): 28-84ms on admin pages
This commit is contained in:
Tyler
2026-06-26 18:55:46 -06:00
parent fdeb2ffd7f
commit fe78645609
111 changed files with 40579 additions and 23712 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/marketing/WaitlistForm.tsx
+68 -30
View File
@@ -1,33 +1,71 @@
"use client";
import { useState, FormEvent } from "react";
import { useReducer, FormEvent } from "react";
interface WaitlistFormProps {
className?: string;
onSuccess?: () => void;
}
type State = {
email: string;
name: string;
referralSource: string;
isSubmitting: boolean;
error: string | null;
success: boolean;
};
type Action =
| { type: "SET_EMAIL"; value: string }
| { type: "SET_NAME"; value: string }
| { type: "SET_REFERRAL_SOURCE"; value: string }
| { type: "SET_SUBMITTING"; value: boolean }
| { type: "SET_ERROR"; value: string | null }
| { type: "SUBMIT_SUCCESS" };
const initialState: State = {
email: "",
name: "",
referralSource: "",
isSubmitting: false,
error: null,
success: false,
};
function reducer(state: State, action: Action): State {
switch (action.type) {
case "SET_EMAIL":
return { ...state, email: action.value };
case "SET_NAME":
return { ...state, name: action.value };
case "SET_REFERRAL_SOURCE":
return { ...state, referralSource: action.value };
case "SET_SUBMITTING":
return { ...state, isSubmitting: action.value };
case "SET_ERROR":
return { ...state, error: action.value };
case "SUBMIT_SUCCESS":
return { ...state, email: "", name: "", referralSource: "", success: true };
}
}
export default function WaitlistForm({ className = "", onSuccess }: WaitlistFormProps) {
const [email, setEmail] = useState("");
const [name, setName] = useState("");
const [referralSource, setReferralSource] = useState("");
const [isSubmitting, setIsSubmitting] = useState(false);
const [error, setError] = useState<string | null>(null);
const [success, setSuccess] = useState(false);
const [state, dispatch] = useReducer(reducer, initialState);
const handleSubmit = async (e: FormEvent) => {
e.preventDefault();
setIsSubmitting(true);
setError(null);
dispatch({ type: "SET_SUBMITTING", value: true });
dispatch({ type: "SET_ERROR", value: null });
try {
const res = await fetch("/api/waitlist", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
email: email.trim(),
name: name.trim() || undefined,
referral_source: referralSource || undefined,
email: state.email.trim(),
name: state.name.trim() || undefined,
referral_source: state.referralSource || undefined,
}),
});
@@ -37,19 +75,19 @@ export default function WaitlistForm({ className = "", onSuccess }: WaitlistForm
throw new Error(data.error || "Failed to join waitlist");
}
setSuccess(true);
setEmail("");
setName("");
setReferralSource("");
dispatch({ type: "SUBMIT_SUCCESS" });
onSuccess?.();
} catch (err) {
setError(err instanceof Error ? err.message : "Something went wrong");
dispatch({
type: "SET_ERROR",
value: err instanceof Error ? err.message : "Something went wrong",
});
} finally {
setIsSubmitting(false);
dispatch({ type: "SET_SUBMITTING", value: false });
}
};
if (success) {
if (state.success) {
return (
<div className={`bg-gradient-to-br from-[#1a4d2e]/10 to-[#2d6a4f]/5 rounded-2xl p-8 text-center border border-[#6b8f71]/20 ${className}`}>
<div className="w-16 h-16 bg-[#1a4d2e]/10 rounded-full flex items-center justify-center mx-auto mb-4">
@@ -77,8 +115,8 @@ export default function WaitlistForm({ className = "", onSuccess }: WaitlistForm
<input aria-label="Your Name"
type="text"
id="name"
value={name}
onChange={(e) => setName(e.target.value)}
value={state.name}
onChange={(e) => dispatch({ type: "SET_NAME", value: e.target.value })}
placeholder="Your name"
className="w-full px-4 py-3 rounded-xl border border-[#6b8f71]/30 bg-white text-[#1a1a1a] placeholder-[#888] focus:outline-none focus:ring-2 focus:ring-[#1a4d2e]/50 focus:border-[#1a4d2e] transition-all"
/>
@@ -90,8 +128,8 @@ export default function WaitlistForm({ className = "", onSuccess }: WaitlistForm
<input aria-label="You@farm.com"
type="email"
id="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
value={state.email}
onChange={(e) => dispatch({ type: "SET_EMAIL", value: e.target.value })}
placeholder="you@farm.com"
required
className="w-full px-4 py-3 rounded-xl border border-[#6b8f71]/30 bg-white text-[#1a1a1a] placeholder-[#888] focus:outline-none focus:ring-2 focus:ring-[#1a4d2e]/50 focus:border-[#1a4d2e] transition-all"
@@ -105,8 +143,8 @@ export default function WaitlistForm({ className = "", onSuccess }: WaitlistForm
</label>
<select aria-label="Referral"
id="referral"
value={referralSource}
onChange={(e) => setReferralSource(e.target.value)}
value={state.referralSource}
onChange={(e) => dispatch({ type: "SET_REFERRAL_SOURCE", value: e.target.value })}
className="w-full px-4 py-3 rounded-xl border border-[#6b8f71]/30 bg-white text-[#1a1a1a] focus:outline-none focus:ring-2 focus:ring-[#1a4d2e]/50 focus:border-[#1a4d2e] transition-all"
>
<option value="">Select an option</option>
@@ -120,18 +158,18 @@ export default function WaitlistForm({ className = "", onSuccess }: WaitlistForm
</select>
</div>
{error && (
{state.error && (
<div className="p-4 bg-red-50 border border-red-200 rounded-xl text-red-700 text-sm">
{error}
{state.error}
</div>
)}
<button
type="submit"
disabled={isSubmitting || !email}
disabled={state.isSubmitting || !state.email}
className="w-full px-6 py-4 bg-gradient-to-r from-[#1a4d2e] to-[#2d6a4f] text-white rounded-xl font-semibold text-lg hover:from-[#2d6a4f] hover:to-[#1a4d2e] transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-[#1a4d2e]/20"
>
{isSubmitting ? (
{state.isSubmitting ? (
<span className="flex items-center justify-center gap-2">
<svg className="animate-spin h-5 w-5" fill="none" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
@@ -149,4 +187,4 @@ export default function WaitlistForm({ className = "", onSuccess }: WaitlistForm
</p>
</form>
);
}
}