dvelo/mhsf-dev
1
0
Fork 0
mirror of https://github.com/DeveloLongScript/MHSF.git synced 2026-05-07 16:05:00 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: fade-in + skeletons

Browse Source
This commit is contained in:
dvelo 2024-08-18 01:15:27 -05:00
parent d810a48dc8
commit f0584f0dfb
10 changed files with 933 additions and 827 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "mh-stats",
"version": "0.10.0",
"version": "0.10.2",
"private": true,
"packageManager": "yarn@1.22.22",
"scripts": {

3
src/app/layout.tsx
View File

@ -20,6 +20,7 @@ import { Inter as interFont } from "next/font/google";
import { CommandBarer } from "@/components/CommandBar";
import ThemedToaster from "@/components/misc/ThemedToaster";
import UnofficalDialog from "@/components/misc/UnofficalDialog";
import ClientFadeIn from "@/components/ClientFadeIn";
const inter = interFont({ variable: "--font-inter", subsets: ["latin"] });
export default async function RootLayout({
@ -63,7 +64,7 @@ export default async function RootLayout({
</div>
<div>
<NextTopLoader />
{children}
<ClientFadeIn>{children}</ClientFadeIn>
</div>{" "}
<ThemedToaster />
<CommandBarer />

8
src/components/AfterServerView.tsx
View File

@ -4,11 +4,13 @@ import { useEffect, useState } from "react";
import { Card, CardDescription, CardHeader, CardTitle } from "./ui/card";
import Markdown from "react-markdown";
import { useTheme } from "next-themes";
import FadeIn from "react-fade-in/lib/FadeIn";
export default function AfterServerView({ server }: { server: string }) {
const [description, setDescription] = useState("");
const [discord, setDiscord] = useState("");
const { resolvedTheme } = useTheme();
const [loading, setLoading] = useState(true);
useEffect(() => {
getCustomization(server).then((b) => {
@ -16,10 +18,14 @@ export default function AfterServerView({ server }: { server: string }) {
setDescription(b.description == null ? "" : b.description);
setDiscord(b.discord == null ? "" : b.discord);
}
setLoading(false);
});
}, []);
if (loading) return <></>;
return (
<>
<FadeIn>
<div className="grid sm:grid-cols-4 pl-4 pr-4 gap-3.5">
{description != "" && (
<Card className="sm:col-span-3">
@ -47,5 +53,7 @@ export default function AfterServerView({ server }: { server: string }) {
<br />
</div>
</FadeIn>
</>
);
}

12
src/components/ClientFadeIn.tsx Normal file
View File

@ -0,0 +1,12 @@
"use client";
import FadeIn from "react-fade-in";
export default function ClientFadeIn({
children,
delay = 0,
}: {
children: React.ReactNode;
delay?: number;
}) {
return <FadeIn delay={delay}>{children}</FadeIn>;
}

26
src/components/FavoritesSortView.tsx
View File

@ -18,6 +18,8 @@ import { Separator } from "./ui/separator";
import { Card, CardDescription, CardHeader, CardTitle } from "./ui/card";
import Link from "next/link";
import toast from "react-hot-toast";
import { Skeleton } from "./ui/skeleton";
import FadeIn from "react-fade-in/lib/FadeIn";
export default function FavoriteSortView() {
const [loading, setLoading] = useState(true);
@ -55,7 +57,23 @@ export default function FavoriteSortView() {
}, []);
if (loading) {
return <Spinner className="flex items-center" />;
return (
<>
<div className="grid grid-cols-2 gap-4">
<Skeleton className="h-[112px] rounded-xl" />
<Skeleton className="h-[112px] rounded-xl" />
</div>
<br />
<Separator />
<br />
<div className="grid grid-cols-4 gap-4">
<Skeleton className="h-[450px] rounded-xl" />
<Skeleton className="h-[450px] rounded-xl" />
<Skeleton className="h-[450px] rounded-xl" />
<Skeleton className="h-[450px] rounded-xl" />
</div>
</>
);
}
return (
@ -200,6 +218,7 @@ export default function FavoriteSortView() {
}
style={{ overflow: "hidden", paddingLeft: 6 }}
>
<FadeIn>
<div className="grid sm:grid-cols-4 gap-4">
{allItems.map((v) => {
if (v.favorites == 0) {
@ -250,8 +269,8 @@ export default function FavoriteSortView() {
</Link>
</TooltipTrigger>
<TooltipContent>
Open up the server page to see more information about
the server
Open up the server page to see more information
about the server
</TooltipContent>
</Tooltip>
</CardDescription>
@ -260,6 +279,7 @@ export default function FavoriteSortView() {
);
})}
</div>
</FadeIn>
</InfiniteScroll>
</div>
);

20
src/components/FavoritesView.tsx
View File

@ -10,6 +10,8 @@ import toast from "react-hot-toast";
import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
import { getAccountFavorites } from "@/lib/api";
import { useRouter } from "@/lib/useRouter";
import { Skeleton } from "./ui/skeleton";
import FadeIn from "react-fade-in/lib/FadeIn";
export default function FavoritesView() {
const [apiFavorites, setApiFavorites] = useState<any>([]);
@ -40,8 +42,20 @@ export default function FavoritesView() {
if (loading) {
return (
<>
<Spinner className="flex items-center" />
<br />
<div className="grid grid-cols-4 gap-4">
<Skeleton className="h-[147px] rounded-xl" />
<Skeleton className="h-[147px] rounded-xl" />
<Skeleton className="h-[147px] rounded-xl" />
<Skeleton className="h-[147px] rounded-xl" />
<Skeleton className="h-[147px] rounded-xl" />
<Skeleton className="h-[147px] rounded-xl" />
<Skeleton className="h-[147px] rounded-xl" />
<Skeleton className="h-[147px] rounded-xl" />
<Skeleton className="h-[147px] rounded-xl" />
<Skeleton className="h-[147px] rounded-xl" />
<Skeleton className="h-[147px] rounded-xl" />
<Skeleton className="h-[147px] rounded-xl" />
</div>
</>
);
}
@ -54,6 +68,7 @@ export default function FavoritesView() {
Your favorites are empty. Maybe favorite a server!
</div>
)}
<FadeIn>
<div className="grid sm:grid-cols-4 gap-4">
{apiFavorites.map((server: ServerResponse) => (
<Card key={server.name}>
@ -101,6 +116,7 @@ export default function FavoritesView() {
</Card>
))}
</div>
</FadeIn>
</>
);
}

13
src/components/NewChart.tsx
View File

@ -19,6 +19,8 @@ import {
import { useEffectOnce } from "@/lib/useEffectOnce";
import { ServerResponse } from "@/lib/types/mh-server";
import { getCommunityServerFavorites, getShortTermData } from "@/lib/api";
import { Skeleton } from "./ui/skeleton";
import FadeIn from "react-fade-in/lib/FadeIn";
const chartConfig = {
player_count: {
@ -37,6 +39,7 @@ export function NewChart({ server }: { server: string }) {
const [chartData, setChartData] = React.useState<any>([]);
const [joins, setJoins] = React.useState<any>(0);
const [loading, setLoading] = React.useState(true);
const [favorites, setFavorites] = React.useState<any>(0);
const allNums = { player_count: joins, favorites };
@ -52,11 +55,20 @@ export function NewChart({ server }: { server: string }) {
});
}
);
setLoading(false);
}
);
});
if (loading)
return (
<>
<Skeleton className="w-full h-[437px]" />
</>
);
return (
<FadeIn>
<Card className="w-full">
<CardHeader className="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row">
<div className="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
@ -145,6 +157,7 @@ export function NewChart({ server }: { server: string }) {
</ChartContainer>
</CardContent>
</Card>
</FadeIn>
);
}

44
src/components/ServerList.tsx
View File

@ -46,6 +46,8 @@ import {
MenubarSubTrigger,
MenubarTrigger,
} from "@/components/ui/menubar";
import ClientFadeIn from "./ClientFadeIn";
import { Skeleton } from "./ui/skeleton";
export default function ServerList() {
const [loading, setLoading]: any = useState(true);
@ -119,18 +121,27 @@ export default function ServerList() {
if (loading) {
return (
<>
<Spinner className="flex items-center" />
<div className="grid grid-cols-3 gap-4 max-lg:grid-cols-2">
<Skeleton className="h-[112px] rounded-xl" />
<Skeleton className="h-[112px] rounded-xl" />
<Skeleton className="h-[112px] rounded-xl" />
</div>
<br />
<div
className="flex justify-center"
dangerouslySetInnerHTML={{ __html: randomText }}
></div>
<Separator />
<br />
<div className="grid grid-cols-4 gap-4">
<Skeleton className="h-[450px] rounded-xl" />
<Skeleton className="h-[450px] rounded-xl" />
<Skeleton className="h-[450px] rounded-xl" />
<Skeleton className="h-[450px] rounded-xl" />
</div>
</>
);
}
return (
<>
<ClientFadeIn>
<div className="max-lg:grid-cols-2 grid grid-cols-3 gap-4 ">
<Stat
title="Players online"
@ -170,9 +181,9 @@ export default function ServerList() {
The server amount is over 3.2k, meaning that new servers
have to go into a queue before being able to be online.{" "}
<br />
(the server count isn't entirely accurate, so sometimes you
might not go into a queue even when the server count is at
3.2k)
(the server count isn't entirely accurate, so sometimes
you might not go into a queue even when the server count
is at 3.2k)
</TooltipContent>
</Tooltip>
)}
@ -206,8 +217,10 @@ export default function ServerList() {
icon={Sun}
/>
</div>
</ClientFadeIn>
<br />
<Separator />
<ClientFadeIn delay={100}>
<Menubar className="mt-3 ml-2 border rounded p-2">
<MenubarMenu>
<MenubarTrigger>Servers</MenubarTrigger>
@ -557,9 +570,15 @@ export default function ServerList() {
<MenubarSubTrigger>Grid</MenubarSubTrigger>
<MenubarSubContent>
<MenubarRadioGroup value={ipr} onValueChange={setIPR}>
<MenubarRadioItem value="4">4 items per row</MenubarRadioItem>
<MenubarRadioItem value="5">5 items per row</MenubarRadioItem>
<MenubarRadioItem value="6">6 items per row</MenubarRadioItem>
<MenubarRadioItem value="4">
4 items per row
</MenubarRadioItem>
<MenubarRadioItem value="5">
5 items per row
</MenubarRadioItem>
<MenubarRadioItem value="6">
6 items per row
</MenubarRadioItem>
</MenubarRadioGroup>
</MenubarSubContent>
</MenubarSub>
@ -584,6 +603,7 @@ export default function ServerList() {
</MenubarContent>
</MenubarMenu>
</Menubar>
</ClientFadeIn>
<Dialog open={random} onOpenChange={setRandom}>
<DialogContent>
@ -695,6 +715,7 @@ export default function ServerList() {
}
style={{ overflow: "hidden !important", paddingLeft: 6 }}
>
<ClientFadeIn delay={200}>
<div className={" grid " + "grid-cols-" + ipr + " gap-4"}>
{servers.map((b: any) => (
<>
@ -702,6 +723,7 @@ export default function ServerList() {
</>
))}
</div>
</ClientFadeIn>
</InfiniteScroll>
</>
);

19
src/components/ServerView.tsx
View File

@ -24,6 +24,8 @@ import { Star, X } from "lucide-react";
import { favoriteServer, isFavorited } from "@/lib/api";
import { LoadingButton } from "./ui/loading-button";
import { useTheme } from "next-themes";
import { Skeleton } from "./ui/skeleton";
import FadeIn from "react-fade-in/lib/FadeIn";
export default function ServerView(props: { server: string }) {
const [single, setSingle] = useState(new ServerSingle(props.server));
@ -66,12 +68,11 @@ export default function ServerView(props: { server: string }) {
if (loading) {
return (
<>
<Spinner className="flex items-center" />
<br />
<div
className="flex justify-center"
dangerouslySetInnerHTML={{ __html: randomText }}
></div>
<div className="grid p-4 sm:grid-cols-3 gap-4">
<Skeleton className="sm:col-span-2 h-[245px]" />
<Skeleton className="h-[245px]" />
</div>
</>
);
}
@ -94,7 +95,7 @@ export default function ServerView(props: { server: string }) {
</div>
</div>
)}
<FadeIn>
<div className="grid p-4 sm:grid-cols-3 gap-4">
<Card className="sm:col-span-2">
<BetterHeader>
@ -159,7 +160,8 @@ export default function ServerView(props: { server: string }) {
</code>
</TooltipTrigger>
<TooltipContent>
<code>{single.grabOffline()?.last_online}</code> in Unix time
<code>{single.grabOffline()?.last_online}</code> in Unix
time
</TooltipContent>
</Tooltip>{" "}
<br />
@ -239,6 +241,7 @@ export default function ServerView(props: { server: string }) {
</CardFooter>
</Card>
</div>
</FadeIn>
</>
);
}

13
src/version.tsx
View File

@ -1,7 +1,7 @@
import Image from "next/image";
import Link from "next/link";
export const version = "b-0.10.0";
export const version = "b-0.10.2";
const User = ({ user }: { user: string }) => (
<span className="cursor-pointer bg-[rgba(255,165,0,0.25);] rounded p-[2.5px]">
@ -44,6 +44,17 @@ export const Changelog = () => (
</code>
</div>
<br />
<div>
<strong className="flex items-center">
Version b-0.10.2 (August 18th 2024)
</strong>
<ul>
<li>• Content fades-in on load</li>
<li>• Instead of using spinners, now we are using Skeletons</li>
</ul>
</div>
<br />
<br />
<div>
<strong className="flex items-center">
Version b-0.10.0 (August 17th 2024)