Skip to content

Commit

Permalink
Refactor home page to use SSR and stream children
Browse files Browse the repository at this point in the history
- Remove `use client` directive.
- Use `suspense` boundary to stream the BuildersCheckInCount client component.
- Add LoadingCounter component for loading state.
All-Khwarizmi committed Jan 11, 2025
1 parent a5e707d commit 295ef19
Showing 1 changed file with 13 additions and 4 deletions.
17 changes: 13 additions & 4 deletions packages/nextjs/app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
"use client";

import { Suspense } from "react";
import Link from "next/link";
import BuildersCheckInCount from "./_components/BuildersCheckInCount";
import type { NextPage } from "next";
import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
import { ArrowPathIcon, BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";

const Home: NextPage = () => {
return (
@@ -15,7 +14,9 @@ const Home: NextPage = () => {
<span className="block text-4xl font-bold">Batch 12</span>
</h1>
<p className="text-center text-lg">Get started by taking a look at your batch GitHub repository.</p>
<BuildersCheckInCount />
<Suspense fallback={<LoadingCounter />}>
<BuildersCheckInCount />
</Suspense>
</div>

<div className="flex-grow bg-base-300 w-full mt-16 px-8 py-12">
@@ -48,3 +49,11 @@ const Home: NextPage = () => {
};

export default Home;
function LoadingCounter() {
return (
<div className="text-lg flex gap-2 justify-center items-center">
<span className="font-bold">Checked in builders count:</span>
<ArrowPathIcon className="size-5 animate-spin" />
</div>
);
}

0 comments on commit 295ef19

Please sign in to comment.