svrjs/svrjs-nextjs-website
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

loading pages

Browse source
This commit is contained in:
Cypro Freelance 2024-07-31 01:06:45 +05:30
parent 9b8261be2f
commit 89b7b3d845
1 changed files with 20 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
app/(root)/changelogs/page.tsx
View file

@ -6,6 +6,7 @@ import { Download } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import ReactMarkdown from "react-markdown"; import ReactMarkdown from "react-markdown";
import { CHANGE_LOGS } from "@/constants/guidelines"; import { CHANGE_LOGS } from "@/constants/guidelines";
import { Skeleton } from "@/components/ui/skeleton";
interface Bullet { interface Bullet {
point: string; point: string;
@ -21,6 +22,7 @@ interface LOGS {
const LogsPage: React.FC = () => { const LogsPage: React.FC = () => {
const [downloads, setDownloads] = useState<LOGS[]>([]); const [downloads, setDownloads] = useState<LOGS[]>([]);
const [error, setError] = useState(""); const [error, setError] = useState("");
const [loading, setLoading] = useState(true);
const fetchDownloads = async () => { const fetchDownloads = async () => {
try { try {
@ -35,6 +37,8 @@ const LogsPage: React.FC = () => {
} }
} catch (error: any) { } catch (error: any) {
setError(error.message || "Failed to fetch downloads"); setError(error.message || "Failed to fetch downloads");
} finally {
setLoading(false);
} }
}; };
@ -49,6 +53,22 @@ const LogsPage: React.FC = () => {
}, []); }, []);
const reversedDownloads = [...downloads].reverse(); const reversedDownloads = [...downloads].reverse();
if (loading) {
return (
<section className="wrapper container py-24 md:py-28 gap-4 flex flex-col">
<div className="mb-3">
<Skeleton className="w-[400px] h-[50px] rounded-md" />
</div>
<div className="flex flex-col gap-4">
<Skeleton className="w-[300px] h-[30px] rounded-md" />
<Skeleton className="w-[200px] h-[20px] rounded-md" />
<Skeleton className="w-[200px] h-[20px] rounded-md" />
<Skeleton className="w-[200px] h-[20px] rounded-md" />
</div>
</section>
);
}
return ( return (
<section <section
id="logs" id="logs"