feat: loading page

Author: Rahuletto

app/academia/calendar/components/Grid.tsx

@@ -35,7 +35,7 @@ export default function CalendarGrid({
 	const todayRef = useRef<HTMLDivElement>(null);
 	const head = useRef<HTMLDivElement>(null);
 
-	const days = calendar[month].days;
+	const days = calendar?.[month]?.days;
 
 	const getFirstDayIndex = () => weekdays.indexOf(days?.[0]?.day);
 

app/academia/components/Attendance/Prediction/Predictor.tsx

@@ -71,7 +71,7 @@ export default function Predictor({
 	}, []);
 
 	useEffect(() => {
-		if (categorizedRanges?.[0]) {
+		if (categorizedRanges && categorizedRanges.length > 0) {
 			const att = predictAttendance(
 				original,
 				data.timetable.schedule,

app/globals.css

@@ -33,6 +33,7 @@ layer(base);
     cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
   --animate-text-slide-down: textSlideDown 0.5s ease-in-out forwards;
   --animate-text-slide-left: textSlideLeft 0.5s ease-in-out forwards;
+  --animate-hourglass: hourglass 2s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
   --animate-text-slide-right: textSlideRight 0.5s ease-in-out forwards;
   --animate-shrink: shrink 1s ease forwards;
 
@@ -328,3 +329,21 @@ layer(base);
 		transform: translate(5px, 5px);
 	}
 }
+
+@keyframes hourglass {
+	0% {
+		transform: rotate(0deg);
+	}
+	25% {
+		transform: rotate(180deg);
+	}
+	50% {
+		transform: rotate(180deg);
+	}
+	75% {
+		transform: rotate(360deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}

app/loading.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { FaHourglassStart } from 'react-icons/fa6'
+
+export default function loading() {
+    return (
+        <div className="flex w-screen h-screen animate-fadeIn flex-col items-center justify-center rounded-2xl bg-light-button text-light-accent dark:bg-dark-button dark:text-dark-accent">
+            <FaHourglassStart
+            title="loading"
+            className={`h-96 animate-hourglass text-5xl font-medium text-light-accent dark:text-dark-accent`}
+            />
+        </div>
+    )
+}

bun.lock

@@ -38,6 +38,7 @@
         "@types/react": "^19.0.8",
         "@types/react-dom": "^19.0.3",
         "all-contributors-cli": "^6.26.1",
+        "babel-plugin-react-compiler": "^19.0.0-beta-27714ef-20250124",
         "eslint": "^9.19.0",
         "eslint-config-next": "15.1.6",
         "postcss": "^8.5.1",
@@ -50,8 +51,14 @@
   "packages": {
     "@alloc/quick-lru": ["@alloc/quick-lru@5.2.0", "", {}, "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw=="],
 
+    "@babel/helper-string-parser": ["@babel/helper-string-parser@7.25.9", "", {}, "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA=="],
+
+    "@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.25.9", "", {}, "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ=="],
+
     "@babel/runtime": ["@babel/runtime@7.26.7", "", { "dependencies": { "regenerator-runtime": "^0.14.0" } }, "sha512-AOPI3D+a8dXnja+iwsUqGRjr1BbZIe771sXdapOtYI531gSqpi92vXivKcq2asu/DFpdl1ceFAKZyRzK2PCVcQ=="],
 
+    "@babel/types": ["@babel/types@7.26.7", "", { "dependencies": { "@babel/helper-string-parser": "^7.25.9", "@babel/helper-validator-identifier": "^7.25.9" } }, "sha512-t8kDRGrKXyp6+tjUh7hw2RLyclsW4TRoRvRHtSyAX9Bb5ldlFh+90YAYY6awRXrlB4G5G2izNeGySpATlFzmOg=="],
+
     "@builder.io/partytown": ["@builder.io/partytown@0.10.3", "", { "bin": { "partytown": "bin/partytown.cjs" } }, "sha512-N2SWA3c5vEad3rgdAFM3zMb6uc7aXqibkgAz4ijvYzycgQXJ4dE5oH6fGFMXSQWj6ayVlLT1/CmpflYUJHfmQg=="],
 
     "@date-fns/tz": ["@date-fns/tz@1.2.0", "", {}, "sha512-LBrd7MiJZ9McsOgxqWX7AaxrDjcFVjWH/tIKJd7pnR7McaslGYOP1QmmiBXdJH/H/yLCT+rcQ7FaPBUxRGUtrg=="],
@@ -368,6 +375,8 @@
 
     "axobject-query": ["axobject-query@4.1.0", "", {}, "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ=="],
 
+    "babel-plugin-react-compiler": ["babel-plugin-react-compiler@19.0.0-beta-27714ef-20250124", "", { "dependencies": { "@babel/types": "^7.19.0" } }, "sha512-1AnF/dlvbIJzAjw5jEbDx7csHx772VP9AtrEg2CgUUD6MIu24j5ShxmBZ0tpfdb2pZtLVwcsoGylfZTzUoCr9w=="],
+
     "balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
 
     "base64-js": ["base64-js@0.0.8", "", {}, "sha512-3XSA2cR/h/73EzlXXdU6YNycmYI7+kicTxks4eJg2g39biHR84slg2+des+p7iHYhbRg/udIS4TD53WabcOUkw=="],

hooks/fetchUserData.tsx

@@ -22,9 +22,7 @@ async function fetchData(): Promise<AllResponse> {
 	const controller = new AbortController();
 	const timeoutId = setTimeout(() => {
 		controller.abort();
-		try {
-			redirect("/sleeping");
-		} catch {}
+		redirect("/sleeping");
 	}, 10000);
 
 	try {

next.config.ts

@@ -23,7 +23,7 @@ const nextConfig: NextConfig = {
 	compress: true,
 	eslint: { ignoreDuringBuilds: true },
 	experimental: {
-		// reactCompiler: true,
+		reactCompiler: true,
 		// parallelServerCompiles: true,
 		nextScriptWorkers: true,
 		// useLightningcss: true,

package.json

@@ -44,6 +44,7 @@
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.3",
     "all-contributors-cli": "^6.26.1",
+    "babel-plugin-react-compiler": "^19.0.0-beta-27714ef-20250124",
     "eslint": "^9.19.0",
     "eslint-config-next": "15.1.6",
     "postcss": "^8.5.1",