🚸 Improve loading ux (#1114)

apps/web/src/app/[locale]/invite/[urlId]/layout.tsx

@@ -32,10 +32,12 @@ const Prefetch = ({ children }: React.PropsWithChildren) => {
     pollId: urlId,
   });
 
+  const comments = trpc.polls.comments.list.useQuery({ pollId: urlId });
+
   if (error?.data?.code === "NOT_FOUND") {
     return <div>Not found</div>;
   }
-  if (!poll || !participants) {
+  if (!poll || !participants || !comments.isFetched) {
     return <Loader />;
   }
 

apps/web/src/app/[locale]/invite/[urlId]/loading.tsx

@@ -1,3 +1,9 @@
+import { Spinner } from "@/components/spinner";
+
 export default function Loading() {
-  return null;
+  return (
+    <div className="flex h-screen items-center justify-center">
+      <Spinner />
+    </div>
+  );
 }

apps/web/src/app/[locale]/poll/[urlId]/skeleton.tsx

@@ -1,13 +1,9 @@
-import { PageContainer, PageHeader } from "@/app/components/page-layout";
+import { Spinner } from "@/components/spinner";
-import { Skeleton } from "@/components/skeleton";
 
 export default function Loading() {
   return (
-    <PageContainer>
+    <div className="flex h-screen items-center justify-center">
-      <PageHeader className="flex items-center gap-x-4">
+      <Spinner />
-        <Skeleton className="size-9" />
+    </div>
-        <Skeleton className="h-5 w-48" />
-      </PageHeader>
-    </PageContainer>
   );
 }

apps/web/src/components/layouts/poll-layout.tsx

@@ -144,8 +144,16 @@ const Prefetch = ({ children }: React.PropsWithChildren) => {
   const poll = trpc.polls.get.useQuery({ urlId });
   const participants = trpc.polls.participants.list.useQuery({ pollId: urlId });
   const watchers = trpc.polls.getWatchers.useQuery({ pollId: urlId });
+  const comments = trpc.polls.comments.list.useQuery({ pollId: urlId });
+
   usePlan(); // prefetch plan
-  if (!poll.data || !watchers.data || !participants.data) {
+
+  if (
+    !poll.isFetched ||
+    !watchers.isFetched ||
+    !participants.isFetched ||
+    !comments.isFetched
+  ) {
     return <Loader />;
   }
 

apps/web/src/components/spinner.tsx

@@ -4,7 +4,10 @@ import { Loader2Icon } from "lucide-react";
 export const Spinner = (props: { className?: string }) => {
   return (
     <Loader2Icon
-      className={clsx("inline-block h-5 animate-spin", props.className)}
+      className={clsx(
+        "text-muted-foreground inline-block h-5 animate-spin",
+        props.className,
+      )}
     />
   );
 };