Merge pull request #26 from gractwo/quickfix

fix hitching & add in frames for all fetched content

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;

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;

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>
+						<h1>{daysOfExistence || "invis placeholder"}</h1>
-							{Math.floor(
-								(Date.now() - new Date("2020-07-06").getTime()) / 86400000
-							)}
-						</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;

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;
+	}
+}

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;