From c85bf3cae5257a895e9123c6621bf78d45b06eda Mon Sep 17 00:00:00 2001
From: jakubmanczak <jakub@manczak.net>
Date: Tue, 3 Jan 2023 19:17:36 +0100
Subject: [PATCH] fix hitching & add in frames for all fetched content

---
 .../IndexGallery/IndexGallery.module.scss     |  8 +++
 .../ProfileCard/ProfileCard.module.scss       |  8 +++
 pages/index.tsx                               | 49 ++++++++++++++-----
 pages/ja/index.tsx                            |  4 +-
 pages/ja/ustawienia.tsx                       |  2 +-
 pages/o-gractwie.tsx                          |  4 +-
 styles/Index.module.scss                      | 24 ++++++++-
 styles/oGractwie.module.scss                  |  8 +++
 8 files changed, 90 insertions(+), 17 deletions(-)

diff --git a/components/IndexGallery/IndexGallery.module.scss b/components/IndexGallery/IndexGallery.module.scss
index 1b6f1c5..bb70a62 100644
--- a/components/IndexGallery/IndexGallery.module.scss
+++ b/components/IndexGallery/IndexGallery.module.scss
@@ -15,11 +15,19 @@
 		margin: 0;
 		padding: 0;
 		max-height: var(--mheight);
+		animation-name: goIn;
+		animation-duration: 350ms;
 		@media screen and (max-width: 800px) {
 			text-decoration: none;
 			max-height: none;
 			text-align: center;
 		}
+		@keyframes goIn {
+			from {
+				opacity: 0;
+				transform: translate(0, 8px);
+			}
+		}
 		img {
 			max-height: var(--mheight);
 			border-radius: 8px;
diff --git a/components/ProfileCard/ProfileCard.module.scss b/components/ProfileCard/ProfileCard.module.scss
index 3be1bef..78d0d3f 100644
--- a/components/ProfileCard/ProfileCard.module.scss
+++ b/components/ProfileCard/ProfileCard.module.scss
@@ -3,6 +3,14 @@
 	background: var(--black1);
 	border-radius: 8px;
 	box-shadow: var(--shadow0);
+	animation-name: goIn;
+	animation-duration: 350ms;
+	@keyframes goIn {
+		from {
+			opacity: 0;
+			transform: translate(0, 16px);
+		}
+	}
 	article {
 		display: flex;
 		flex-direction: row;
diff --git a/pages/index.tsx b/pages/index.tsx
index 4074caa..7415285 100644
--- a/pages/index.tsx
+++ b/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>
diff --git a/pages/ja/index.tsx b/pages/ja/index.tsx
index 872ebca..00752a4 100644
--- a/pages/ja/index.tsx
+++ b/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>
diff --git a/pages/ja/ustawienia.tsx b/pages/ja/ustawienia.tsx
index bdc01eb..6f66d68 100644
--- a/pages/ja/ustawienia.tsx
+++ b/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>
diff --git a/pages/o-gractwie.tsx b/pages/o-gractwie.tsx
index 1d4119a..7bbdb37 100644
--- a/pages/o-gractwie.tsx
+++ b/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;
diff --git a/styles/Index.module.scss b/styles/Index.module.scss
index c76545b..1bc0c66 100644
--- a/styles/Index.module.scss
+++ b/styles/Index.module.scss
@@ -37,8 +37,14 @@
 		transform: scale(0.85);
 	}
 }
-.h1clicktorefreshsplash {
+.actualsplash {
 	user-select: none;
+	opacity: 0;
+	&.doneLoading {
+		opacity: 1;
+		animation-name: goIn;
+		animation-duration: 350ms;
+	}
 	&:hover {
 		cursor: pointer;
 	}
@@ -63,6 +69,13 @@
 		text-align: center;
 		h1 {
 			font-size: 2em;
+			min-height: 1em;
+			opacity: 0;
+			&.doneLoading {
+				opacity: 1;
+				animation-name: goIn;
+				animation-duration: 350ms;
+			}
 		}
 		&:first-of-type {
 			border-left: none;
@@ -92,3 +105,12 @@
 		}
 	}
 }
+@keyframes goIn {
+	from {
+		opacity: 0;
+		transform: translate(0, 20px);
+	}
+	to {
+		opacity: 1;
+	}
+}
diff --git a/styles/oGractwie.module.scss b/styles/oGractwie.module.scss
index 1b8dbbb..f632a4e 100644
--- a/styles/oGractwie.module.scss
+++ b/styles/oGractwie.module.scss
@@ -61,6 +61,14 @@
 			border-radius: var(--radius);
 			box-shadow: var(--shadow0);
 			transition-duration: 100ms;
+			animation-name: goIn;
+			animation-duration: 200ms;
+			@keyframes goIn {
+				from {
+					opacity: 0;
+					transform: translate(0, 16px);
+				}
+			}
 			img {
 				width: 128px;
 				max-width: 156px;