add shift to skip animation and a message to tell it

src/components/Loading.tsx

@@ -1,11 +1,29 @@
 import TypeIt from "typeit-react";
 
 import handleTyping from "@/scripts/Loading";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 export default function Loading() {
 	const [loadingVisible, setLoadingVisible] = useState<boolean>(true);
 
+	function handleKeyPress(event: KeyboardEvent) {
+		if (event.key === "Shift") hideLoading();
+	}
+
+	function hideLoading() {
+		setLoadingVisible(false);
+
+		document.removeEventListener("keydown", handleKeyPress);
+	}
+
+	useEffect(() => {
+		document.addEventListener("keydown", handleKeyPress);
+
+		return () => {
+			document.removeEventListener("keydown", handleKeyPress);
+		};
+	}, []);
+
 	return (
 		<div>
 			<div
@@ -21,7 +39,7 @@ export default function Loading() {
 				/>
 				<button
 					type="button"
-					onClick={() => setLoadingVisible(false)}
+					onClick={hideLoading}
 					className={`${loadingVisible ? "" : "hidden"} text-[large] absolute bottom-[50px] left-[50%] translate-x-[-50%] bg-transparent text-[#0F0] border-none cursor-pointer font-mono`}
 				>
 					Skip Animation

src/scripts/Loading.tsx

@@ -8,11 +8,30 @@ export default function handleTyping(
 	instance
 		.options({
 			lifeLike: true,
+			speed: 10
 		})
 		.type(
 			'<span style="color: #118c0a;">stef@Life</span>: <span style="color: #2c5bc7;">/</span> $ ',
 			{ instant: true, delay: 500 },
 		)
+		.type("echo \"Press Shift or the 'Skip Animation' button to skip this animation\"", { delay: 200 })
+		.options({
+			speed: 100
+		})
+		.break({ instant: true })
+		.type("Press Shift or the 'Skip Animation' button to skip this animation", { instant: true })
+		.break({ instant: true })
+		.type(
+			'<span style="color: #118c0a;">stef@Life</span>: <span style="color: #2c5bc7;">/</span> $ ',
+			{ instant: true, delay: 2000 },
+		)
+		.type("clear", { delay: 100 })
+		.break({ instant: true })
+		.delete(() => null, { instant: true })
+		.type(
+			'<span style="color: #118c0a;">stef@Life</span>: <span style="color: #2c5bc7;">/</span> $ ',
+			{ instant: true, delay: 500 },
+		)
 		.type("whereis love")
 		.break({ instant: true })
 		.type("love:", { instant: true })