diff --git a/src/app/scripts/page.tsx b/src/app/scripts/page.tsx index 97d1ad4..aa7ab97 100644 --- a/src/app/scripts/page.tsx +++ b/src/app/scripts/page.tsx @@ -4,8 +4,6 @@ import ScriptBrowser from "@/app/scripts/_components/ScriptBrowser"; import { Category } from "@/lib/types"; import { useEffect, useState } from "react"; -export const dynamic = "force-dynamic" - const sortCategories = (categories: Category[]): Category[] => { return categories.sort((a: Category, b: Category) => { if ( @@ -27,10 +25,13 @@ const sortCategories = (categories: Category[]): Category[] => { export default function Page() { const [links, setLinks] = useState([]); const [selectedScript, setSelectedScript] = useState(null); + const [loading, setLoading] = useState(true); useEffect(() => { const fetchCategories = async (): Promise => { - const response = await fetch("/api/categories", {}); + const response = await fetch("/api/categories", { + next: { revalidate: 60 * 60 * 24 }, + }); if (!response.ok) { throw new Error("Failed to fetch categories"); } @@ -39,20 +40,38 @@ export default function Page() { const fetchAndSortCategories = async () => { try { + setLoading(true); const categories = await fetchCategories(); if (categories.length === 0) { throw new Error("Empty response"); } const sortedCategories = sortCategories(categories); setLinks(sortedCategories); + setLoading(false); } catch (error) { console.error(error); + setLoading(false); } }; fetchAndSortCategories(); }, []); + if (loading) { + return ( +
+
+

+ Loading... +

+

+ Please wait while we fetch the scripts... +

+
+
+ ); + } + return (