Skip to content

Commit

Permalink
feat: fade-in + skeletons
Browse files Browse the repository at this point in the history
  • Loading branch information
@DeveloLongScript
DeveloLongScript committed Aug 18, 2024
1 parent d810a48 commit f0584f0
Show file tree
Hide file tree
Showing 10 changed files with 900 additions and 794 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "mh-stats",
"version": "0.10.0",
"version": "0.10.2",
"private": true,
"packageManager": "yarn@1.22.22",
"scripts": {
Expand Down
3 changes: 2 additions & 1 deletion src/app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -63,7 +64,7 @@ export default async function RootLayout({
</div>
<div>
<NextTopLoader />
{children}
<ClientFadeIn>{children}</ClientFadeIn>
</div>{" "}
<ThemedToaster />
<CommandBarer />
Expand Down
60 changes: 34 additions & 26 deletions src/components/AfterServerView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,48 +4,56 @@ 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) => {
if (b != null) {
setDescription(b.description == null ? "" : b.description);
setDiscord(b.discord == null ? "" : b.discord);
}
setLoading(false);
});
}, []);
if (loading) return <></>;

return (
<div className="grid sm:grid-cols-4 pl-4 pr-4 gap-3.5">
{description != "" && (
<Card className="sm:col-span-3">
<CardDescription className="p-4 prose dark:prose-invert">
<Markdown disallowedElements={["img"]}>{description}</Markdown>
</CardDescription>
</Card>
)}
{discord != "" && (
<Card>
<CardHeader>
<CardTitle>Discord Server</CardTitle>
<CardDescription className="p-4 prose dark:prose-invert">
<iframe
src={`https://discord.com/widget?id=${discord}&theme=${resolvedTheme}`}
height="500"
allowTransparency={true}
className="rounded-lg lg:w-[350px]"
sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"
/>
</CardDescription>
</CardHeader>
</Card>
)}
<>
<FadeIn>
<div className="grid sm:grid-cols-4 pl-4 pr-4 gap-3.5">
{description != "" && (
<Card className="sm:col-span-3">
<CardDescription className="p-4 prose dark:prose-invert">
<Markdown disallowedElements={["img"]}>{description}</Markdown>
</CardDescription>
</Card>
)}
{discord != "" && (
<Card>
<CardHeader>
<CardTitle>Discord Server</CardTitle>
<CardDescription className="p-4 prose dark:prose-invert">
<iframe
src={`https://discord.com/widget?id=${discord}&theme=${resolvedTheme}`}
height="500"
allowTransparency={true}
className="rounded-lg lg:w-[350px]"
sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"
/>
</CardDescription>
</CardHeader>
</Card>
)}

<br />
</div>
<br />
</div>
</FadeIn>
</>
);
}
12 changes: 12 additions & 0 deletions src/components/ClientFadeIn.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>;
}
140 changes: 80 additions & 60 deletions src/components/FavoritesSortView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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 (
Expand Down Expand Up @@ -200,66 +218,68 @@ export default function FavoriteSortView() {
}
style={{ overflow: "hidden", paddingLeft: 6 }}
>
<div className="grid sm:grid-cols-4 gap-4">
{allItems.map((v) => {
if (v.favorites == 0) {
return <></>;
}
<FadeIn>
<div className="grid sm:grid-cols-4 gap-4">
{allItems.map((v) => {
if (v.favorites == 0) {
return <></>;
}

if (online[v.server] != undefined)
return (
<ServerCard
mini
b={online[v.server]}
favs={v.favorites}
key={v.server}
/>
);
else
return (
<Card className="h-[226px]" key={v.server}>
<CardHeader>
<CardTitle>{v.server}</CardTitle>
<CardDescription>
{v.favorites} favorited
<br />
<Button
size="icon"
variant="secondary"
className="min-w-[128px] max-w-[328px] h-[32px] mt-2 ml-2 max-md:hidden"
onClick={() => {
navigator.clipboard.writeText(
v.server + ".mshf.minehut.gg"
);
toast.success("Copied IP to clipboard");
}}
>
<Copy size={18} />
<code className="ml-2">{v.server}</code>
</Button>
<Tooltip>
<TooltipTrigger>
<Link href={"/server/" + v.server}>
<Button
size="icon"
variant="secondary"
className="w-[32px] h-[32px] mt-2 ml-2 max-md:hidden"
>
<Layers size={18} />
</Button>
</Link>
</TooltipTrigger>
<TooltipContent>
Open up the server page to see more information about
the server
</TooltipContent>
</Tooltip>
</CardDescription>
</CardHeader>
</Card>
);
})}
</div>
if (online[v.server] != undefined)
return (
<ServerCard
mini
b={online[v.server]}
favs={v.favorites}
key={v.server}
/>
);
else
return (
<Card className="h-[226px]" key={v.server}>
<CardHeader>
<CardTitle>{v.server}</CardTitle>
<CardDescription>
{v.favorites} favorited
<br />
<Button
size="icon"
variant="secondary"
className="min-w-[128px] max-w-[328px] h-[32px] mt-2 ml-2 max-md:hidden"
onClick={() => {
navigator.clipboard.writeText(
v.server + ".mshf.minehut.gg"
);
toast.success("Copied IP to clipboard");
}}
>
<Copy size={18} />
<code className="ml-2">{v.server}</code>
</Button>
<Tooltip>
<TooltipTrigger>
<Link href={"/server/" + v.server}>
<Button
size="icon"
variant="secondary"
className="w-[32px] h-[32px] mt-2 ml-2 max-md:hidden"
>
<Layers size={18} />
</Button>
</Link>
</TooltipTrigger>
<TooltipContent>
Open up the server page to see more information
about the server
</TooltipContent>
</Tooltip>
</CardDescription>
</CardHeader>
</Card>
);
})}
</div>
</FadeIn>
</InfiniteScroll>
</div>
);
Expand Down
Loading

0 comments on commit f0584f0

Please sign in to comment.