polish: typewriter SSR fix, Community link label, verify premium cards, loading skeleton

src/components/typewriter-text.tsx

@@ -10,13 +10,13 @@ export function TypewriterText({
 	text: string;
 	className?: string;
 }) {
-	const [displayed, setDisplayed] = useState("");
-	const [done, setDone] = useState(false);
+	const [displayed, setDisplayed] = useState(text[0] ?? "");
+	const [done, setDone] = useState(text.length <= 1);
 
 	useEffect(() => {
-		setDisplayed("");
-		setDone(false);
-		let i = 0;
+		setDisplayed(text[0] ?? "");
+		setDone(text.length <= 1);
+		let i = 1;
 		const id = setInterval(() => {
 			if (i < text.length) {
 				setDisplayed(text.slice(0, i + 1));
@@ -30,13 +30,14 @@ export function TypewriterText({
 	}, [text]);
 
 	return (
-		<motion.span
-			className={`${className ?? ""} ${!done ? "typing-cursor" : ""}`}
-			initial={{ opacity: 0 }}
-			animate={{ opacity: 1 }}
-			transition={{ duration: 0.3 }}
-		>
-			{displayed}
-		</motion.span>
+		<>
+			<span className="sr-only">{text}</span>
+			<motion.span
+				className={`${className ?? ""} ${!done ? "typing-cursor" : ""}`}
+				aria-hidden
+			>
+				{displayed}
+			</motion.span>
+		</>
 	);
 }