fix hitching & add in frames for all fetched content

pages/index.tsx

@@ -8,6 +8,11 @@ import { IndexGallery } from "../components/IndexGallery/IndexGallery";
 const PageIndex = () => {
 	const [splash, setSplash] = useState("");
 	const [memberCount, setMemberCount] = useState("");
+	const [daysOfExistence, setDaysOfExistence] = useState("");
+	const [sentMessages, setSentMessages] = useState("");
+	const [welcomeText, setWelcomeText] = useState(
+		"Witamy na witrynie internetowej Gractwa."
+	);
 	function randomizeSplash(): void {
 		fetch("https://gractwo.pl/api/v1/splash")
 			.then((res) => {
@@ -17,6 +22,8 @@ const PageIndex = () => {
 				setSplash(data.Splash);
 			})
 			.catch((err) => {
+				setSplash("nie ma tu co zabezpieczać");
+				setWelcomeText("splashtexty spadły z rowerka!");
 				console.log(err);
 			});
 	}
@@ -30,10 +37,34 @@ const PageIndex = () => {
 				setMemberCount(data);
 			})
 			.catch((err) => {
+				setMemberCount("∞");
 				console.log(err);
 			});
+		setDaysOfExistence(
+			Math.floor(
+				(Date.now() - new Date("2020-07-06").getTime()) / 86400000
+			).toString()
+		);
+		setSentMessages("dużo");
 	}, []);
-	const welcometext: string = "Witamy na witrynie internetowej Gractwa."; // Mamy nadzieję że odnajdziesz czego szukasz, zbłąkana duszo.";
+	useEffect(() => {
+		if (!memberCount) return;
+		if (!daysOfExistence) return;
+		if (!sentMessages) return;
+		if (document) {
+			document
+				.querySelectorAll(".statCont > article > h1")
+				.forEach((el: Element) => {
+					el.classList.add(styles.doneLoading);
+				});
+		}
+	}, [memberCount, daysOfExistence, sentMessages]);
+	useEffect(() => {
+		if (!splash) return;
+		if (document) {
+			document.querySelector(".splashtext")?.classList.add(styles.doneLoading);
+		}
+	}, [splash]);
 	return (
 		<>
 			<SEO />
@@ -41,29 +72,25 @@ const PageIndex = () => {
 				<div className={styles.heroinside}>
 					<h1
 						onClick={randomizeSplash}
-						className={styles.h1clicktorefreshsplash}
+						className={`${styles.actualsplash} splashtext`}
 					>
 						&bdquo;{splash || "..."}&rdquo;
 					</h1>
-					<p>{welcometext}</p>
+					<p>{welcomeText || "Witamy na witrynie internetowej Gractwa."}</p>
 				</div>
 			</div>
 			<div className={styles.statscontainer}>
-				<main className={styles.stats}>
+				<main className={`${styles.stats} statCont`}>
 					<article>
-						<h1>{memberCount || "∞"}</h1>
+						<h1>{memberCount || "invis placeholder"}</h1>
 						<p>członków na discordzie</p>
 					</article>
 					<article>
-						<h1>
-							{Math.floor(
-								(Date.now() - new Date("2020-07-06").getTime()) / 86400000
-							)}
-						</h1>
+						<h1>{daysOfExistence || "invis placeholder"}</h1>
 						<p>dni istnienia gractwa</p>
 					</article>
 					<article>
-						<h1>dużo</h1>
+						<h1>{sentMessages || "invis placeholder"}</h1>
 						<p>wysłanych wiadomości</p>
 					</article>
 				</main>

pages/ja/index.tsx

@@ -19,7 +19,7 @@ const PageMe = () => {
 
 	useEffect(() => {
 		if (!user) return;
-		fetch("https://gractwo.pl/api/v1/admincards")
+		fetch("https://gractwo.pl/api/v1/persons-of-note")
 			.then((res) => {
 				return res.json();
 			})
@@ -41,7 +41,7 @@ const PageMe = () => {
 					<p>Sit tight.</p>
 				</main>
 			)}
-			{error && (
+			{!isLoading && error && (
 				<main>
 					<h3>Wystąpił błąd.</h3>
 					<p>Tyle wiemy:</p>

pages/ja/ustawienia.tsx

@@ -14,7 +14,7 @@ const PageMeSettings = () => {
 					</main>
 				</>
 			)}
-			{error && (
+			{!isLoading && error && (
 				<main>
 					<h3>Wystąpił błąd.</h3>
 					<p>Tyle wiemy.</p>

pages/o-gractwie.tsx

@@ -92,7 +92,7 @@ const PageInfo = () => {
 			</main>
 			<main id="sklad-administracji">
 				<h2>skład administracji</h2>
-				<div className={styles.persons}>
+				<div className={styles.persons} style={{ minHeight: "280px" }}>
 					{personsList
 						.filter((el: apiResType) => {
 							return el.IsAdmin;
@@ -125,7 +125,7 @@ const PageInfo = () => {
 			</main>
 			<main id="osoby-godne-uwagi">
 				<h2>osoby godne uwagi</h2>
-				<div className={styles.persons}>
+				<div className={styles.persons} style={{ minHeight: "128px" }}>
 					{personsList
 						.filter((el: apiResType) => {
 							return !el.IsAdmin;