Skip to content

Commit

Permalink
improve loading animation on leadersboard
Browse files Browse the repository at this point in the history
  • Loading branch information
@nibty
nibty committed May 14, 2024
1 parent fa9406d commit 7cb08d9
Showing 1 changed file with 118 additions and 121 deletions.
239 changes: 118 additions & 121 deletions app/leaderboard/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,8 @@ export default function Leaderboard() {
const [leaderboardIndex, setLeaderboardIndex]: [any, any] = useState<
Map<string, LeaderboardEntry>
>(new Map());
const [isLoadingStats, setIsLoadingStats] = useState(true);
const [isLeaderboardLoading, setIsLeaderboardLoading] = useState(true);
const [isStatsLoadingStats, setIsStatsLoadingStats] = useState(true);
const [stateData, setStateData]: [State, any] = useState<State>({
createdAt: new Date(),
points: 0n,
Expand All @@ -121,16 +122,19 @@ export default function Leaderboard() {
setAccountType(getAccountTypeFromSearchParams(searchParams));

const fetchData = async () => {
fetchStateData().then((data) => {
setStateData(data);
setIsStatsLoadingStats(false);
});

setIsLeaderboardLoading(true);
fetchLeaderboardData(accountType).then((data: LeaderboardEntry[]) => {
const idxData = generateLeaderboardIndex(data, accountType);
setLeaderboardData(data);
setLeaderboardIndex(idxData);
setIsLeaderboardLoading(false);
// console.log("Fetched leaderboard data", data, idxData);
});
fetchStateData().then((data) => {
setStateData(data);
setIsLoadingStats(false);
});
};

fetchData().then();
Expand Down Expand Up @@ -201,15 +205,10 @@ export default function Leaderboard() {
<main className="flex min-h-screen flex-col items-center">
<div
id="background-image-overlay"
style={{
position: "fixed",
height: "100%",
width: "100%",
left: "0",
top: "0",
}}
className="fixed h-full w-full left-0 top-0"
>
<Image
className={`opacity-0 ${isStatsLoadingStats && isLeaderboardLoading ? "" : "fade-in"}`}
alt="Background image"
src="/background-image.jpg"
fill
Expand All @@ -222,7 +221,9 @@ export default function Leaderboard() {

<NavBar />

<div className="card rounded-none sm:rounded-xl w-full md:max-w-screen-xl bg-base-100 shadow-xl opacity-85 md:mt-5 sm:mb-8">
<div
className={`card rounded-none sm:rounded-xl w-full md:max-w-screen-xl bg-base-100 opacity-85 md:mt-5 sm:mb-8 ${isStatsLoadingStats && isLeaderboardLoading ? "" : "shadow-xl"}`}
>
<div className="card-body px-0 py-3 sm:px-5 sm:py-5 md:px-8 md:py-8">
<div className="flex md:grid md:grid-cols-3 items-center justify-center mb-4">
<div></div>
Expand All @@ -236,133 +237,129 @@ export default function Leaderboard() {
</div>
</div>

<StateStats state={stateData} isLoadingStats={isLoadingStats} />
<StateStats state={stateData} isLoadingStats={isStatsLoadingStats} />

<div className="overflow-x-auto">
{leaderboardData && leaderboardData.length != 0 ? (
<table className="table table-fixed md:table-auto table-lg table-zebra">
<thead>
<tr>
<th className="border-b border-blue-gray-100 bg-blue-gray-50 p-2 w-10">
<span>Rank</span>
</th>
<th className="border-b border-blue-gray-100 bg-blue-gray-50 p-4">
<span>Account</span>
</th>
<th className="hidden lg:table-cell border-b border-blue-gray-100 bg-blue-gray-50 p-4">
<span>Hashes</span>
</th>
<table
className={`table table-fixed md:table-auto table-lg table-zebra opacity-0 ${!isStatsLoadingStats && !isLeaderboardLoading ? "fade-in" : ""}`}
>
<thead>
<tr>
<th className="border-b border-blue-gray-100 bg-blue-gray-50 p-2 w-10">
<span>Rank</span>
</th>
<th className="border-b border-blue-gray-100 bg-blue-gray-50 p-4">
<span>Account</span>
</th>
<th className="hidden lg:table-cell border-b border-blue-gray-100 bg-blue-gray-50 p-4">
<span>Hashes</span>
</th>
<th className="hidden lg:table-cell border-b border-blue-gray-100 bg-blue-gray-50 p-4">
<span>Super Hashes</span>
</th>
{accountType == AccountType.Solana ? (
<th className="hidden lg:table-cell border-b border-blue-gray-100 bg-blue-gray-50 p-4">
<span>Super Hashes</span>
<span>solXEN</span>
</th>
{accountType == AccountType.Solana ? (
<th className="hidden lg:table-cell border-b border-blue-gray-100 bg-blue-gray-50 p-4">
<span>solXEN</span>
</th>
) : null}
</tr>
</thead>
<tbody>
{leaderboardData.map(
(
{
rank,
solAccount,
ethAccount,
hashes,
superHashes,
points,
},
index,
) => {
return (
<tr key={rank} className={``}>
<td className="p-4 pr-0 border-b border-blue-gray-50">
<span color="blue-gray" className="font-bold">
{rank}
</span>
</td>
<td className="p-4 border-b border-blue-gray-50 text-xs sm:text-base font-mono truncate">
<span>
{accountType == "solana"
? solAccount
: ethAccount}
</span>
) : null}
</tr>
</thead>
<tbody>
{leaderboardData.map(
(
{
rank,
solAccount,
ethAccount,
hashes,
superHashes,
points,
},
index,
) => {
return (
<tr key={rank} className={``}>
<td className="p-4 pr-0 border-b border-blue-gray-50">
<span color="blue-gray" className="font-bold">
{rank}
</span>
</td>
<td className="p-4 border-b border-blue-gray-50 text-xs sm:text-base font-mono truncate">
<span>
{accountType == "solana" ? solAccount : ethAccount}
</span>

<dl className="lg:hidden font-normal mt-2">
<div className="flex justify-between">
<dt className="text-sm text-gray-400 mt-1 font-mono">
Hashes
</dt>
<dd className="text-gray-400 text-sm mt-1 font-mono">
{Intl.NumberFormat("en-US").format(hashes)}
</dd>
</div>
<dl className="lg:hidden font-normal mt-2">
<div className="flex justify-between">
<dt className="text-sm text-gray-400 mt-1 font-mono">
Hashes
</dt>
<dd className="text-gray-400 text-sm mt-1 font-mono">
{Intl.NumberFormat("en-US").format(hashes)}
</dd>
</div>
<div className="flex justify-between">
<dt className="text-gray-400 text-sm mt-1 font-mono">
Super Hashes
</dt>
<dd className="text-gray-400 text-sm mt-1">
{Intl.NumberFormat("en-US").format(superHashes)}
</dd>
</div>
{accountType == AccountType.Solana ? (
<div className="flex justify-between">
<dt className="text-gray-400 text-sm mt-1 font-mono">
Super Hashes
<dt className="text-gray-400 text-sm mt-1 font-medium">
solXEN
</dt>
<dd className="text-gray-400 text-sm mt-1">
<dd className="text-gray-400 text-sm mt-1 font-mono">
{percentOfState(points) > 0 ? (
<div className="badge badge-sm badge-success badge-outline mr-2">
{percentOfState(points)}%
</div>
) : null}
{Intl.NumberFormat("en-US").format(
superHashes,
points / 1_000_000_000n,
)}
</dd>
</div>
{accountType == AccountType.Solana ? (
<div className="flex justify-between">
<dt className="text-gray-400 text-sm mt-1 font-medium">
solXEN
</dt>
<dd className="text-gray-400 text-sm mt-1 font-mono">
{percentOfState(points) > 0 ? (
<div className="badge badge-sm badge-success badge-outline mr-2">
{percentOfState(points)}%
</div>
) : null}
{Intl.NumberFormat("en-US").format(
points / 1_000_000_000n,
)}
</dd>
</div>
) : null}
</dl>
</td>
) : null}
</dl>
</td>
<td className="hidden lg:table-cell p-4 border-b border-blue-gray-50">
<span className="font-mono">
{Intl.NumberFormat("en-US").format(hashes)}
</span>
</td>
<td className="hidden lg:table-cell p-4 border-b border-blue-gray-50">
<span className="font-mono">
{Intl.NumberFormat("en-US").format(superHashes)}
</span>
</td>
{accountType == AccountType.Solana ? (
<td className="hidden lg:table-cell p-4 border-b border-blue-gray-50">
<span className="font-mono">
{Intl.NumberFormat("en-US").format(hashes)}
</span>
</td>
<td className="hidden lg:table-cell p-4 border-b border-blue-gray-50">
<span className="font-mono">
{Intl.NumberFormat("en-US").format(superHashes)}
{Intl.NumberFormat("en-US").format(
points / 1_000_000_000n,
)}
{percentOfState(points) > 0 ? (
<div className="badge badge-sm badge-success badge-outline ml-2">
{percentOfState(points)}%
</div>
) : null}
</span>
</td>
{accountType == AccountType.Solana ? (
<td className="hidden lg:table-cell p-4 border-b border-blue-gray-50">
<span className="font-mono">
{Intl.NumberFormat("en-US").format(
points / 1_000_000_000n,
)}
{percentOfState(points) > 0 ? (
<div className="badge badge-sm badge-success badge-outline ml-2">
{percentOfState(points)}%
</div>
) : null}
</span>
</td>
) : null}
</tr>
);
},
)}
</tbody>
</table>
) : null}
) : null}
</tr>
);
},
)}
</tbody>
</table>
</div>
</div>
</div>

<Footer />
{!isLeaderboardLoading && !isStatsLoadingStats && <Footer />}
</main>
);
}

0 comments on commit 7cb08d9

Please sign in to comment.