import Head from "next/head"; import { PageShell } from "~/components/PageShell"; import { PostList } from "~/components/PostList"; import { api } from "~/utils/api"; const postSkeletonKeys = [ "posts-loading-1", "posts-loading-2", "posts-loading-3", "posts-loading-4", "posts-loading-5", "posts-loading-6", ] as const; export default function PostsPage() { const postsQuery = api.post.list.useQuery({ limit: 24 }); return ( <> Posts | Web Boilerplate {postsQuery.error ? (
Failed to load posts: {postsQuery.error.message}
) : null} {postsQuery.isPending ? (
{postSkeletonKeys.map((key) => (
))}
) : null} {postsQuery.data ? ( ) : null} ); }