loaders

jonogon · Aug 23, 2024 · 1f46841 · 1f46841
1 parent b37ff7f
commit 1f46841
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 44 deletions.
diff --git a/apps/jonogon-web-next/src/app/components/PetitionCard.tsx b/apps/jonogon-web-next/src/app/components/PetitionCard.tsx
@@ -29,7 +29,11 @@ export default function PetitionCard(props: {
     const totalVotes = props.upvotes + props.downvotes;
 
     return (
-        <Card className={''}>
+        <Card
+            className={'cursor-pointer'}
+            onClick={() => {
+                router.push(`/petitions/${props.id}`);
+            }}>
             <CardHeader className={''}>
                 {props.attachment && (
                     <img
@@ -77,7 +81,9 @@ export default function PetitionCard(props: {
                         <Button
                             size={'sm'}
                             variant={'outline'}
-                            onClick={() => {
+                            onClick={(ev) => {
+                                ev.stopPropagation();
+
                                 const href = `/petitions/${props.id}`;
 
                                 isAuthenticated

diff --git a/apps/jonogon-web-next/src/app/components/PetitionList.tsx b/apps/jonogon-web-next/src/app/components/PetitionList.tsx
@@ -22,11 +22,12 @@ const PetitionList = () => {
 
     const page = params.get('page') ? Number(params.get('page')) : 0;
 
-    const {data: petitionRequestListResponse} = trpc.petitions.list.useQuery({
-        filter: type,
-        page: page,
-        sort: params.get('sort') === 'latest' ? 'time' : 'votes',
-    });
+    const {data: petitionRequestListResponse, isLoading} =
+        trpc.petitions.list.useQuery({
+            filter: type,
+            page: page,
+            sort: params.get('sort') === 'latest' ? 'time' : 'votes',
+        });
 
     const petitions = petitionRequestListResponse?.data ?? [];
 
@@ -48,25 +49,44 @@ const PetitionList = () => {
                     gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
                     gap: '15px',
                 }}>
-                {petitions.slice(0, 32).map((p) => {
-                    return (
-                        <PetitionCard
-                            id={p.data.id}
-                            mode={type}
-                            status={p.data.status}
-                            name={p.extras.user.name ?? ''}
-                            title={p.data.title ?? 'Untitled Petition'}
-                            attachment={p.data.attachment ?? ''}
-                            date={new Date(p.data.submitted_at ?? '1970-01-01')}
-                            target={p.data.target ?? 'Some Ministry'}
-                            key={p.data.id ?? 0}
-                            upvotes={Number(p.data.petition_upvote_count) ?? 0}
-                            downvotes={
-                                Number(p.data.petition_downvote_count) ?? 0
-                            }
-                        />
-                    );
-                })}
+                {isLoading
+                    ? Array(4)
+                          .fill(null)
+                          .map((_, i) => {
+                              return (
+                                  <div
+                                      className={
+                                          'w-full bg-border animate-pulse h-32'
+                                      }
+                                      key={i}></div>
+                              );
+                          })
+                    : petitions.slice(0, 32).map((p) => {
+                          return (
+                              <PetitionCard
+                                  id={p.data.id}
+                                  mode={type}
+                                  status={p.data.status}
+                                  name={p.extras.user.name ?? ''}
+                                  title={p.data.title ?? 'Untitled Petition'}
+                                  attachment={p.data.attachment ?? ''}
+                                  date={
+                                      new Date(
+                                          p.data.submitted_at ?? '1970-01-01',
+                                      )
+                                  }
+                                  target={p.data.target ?? 'Some Ministry'}
+                                  key={p.data.id ?? 0}
+                                  upvotes={
+                                      Number(p.data.petition_upvote_count) ?? 0
+                                  }
+                                  downvotes={
+                                      Number(p.data.petition_downvote_count) ??
+                                      0
+                                  }
+                              />
+                          );
+                      })}
             </div>
             <div className={'py-4'}>
                 <Pagination>

diff --git a/apps/jonogon-web-next/src/app/petitions/[id]/page.tsx b/apps/jonogon-web-next/src/app/petitions/[id]/page.tsx
@@ -1,5 +1,7 @@
 'use client';
 
+import Loading from '@/app/petitions/[id]/loading';
+
 export const runtime = 'edge';
 
 import {useEffect, useState} from 'react';
@@ -23,7 +25,11 @@ export default function Petition() {
 
     const {id: petition_id} = useParams<{id: string}>();
 
-    const {data: petition, refetch} = trpc.petitions.get.useQuery({
+    const {
+        data: petition,
+        refetch,
+        isLoading,
+    } = trpc.petitions.get.useQuery({
         id: petition_id!!,
     });
 
@@ -117,7 +123,9 @@ export default function Petition() {
         },
     });
 
-    return (
+    return isLoading ? (
+        <Loading />
+    ) : (
         <>
             <div className="max-w-screen-sm mx-auto px-4 pt-12 mb-28 flex flex-col gap-4">
                 {isOwnPetition || isMod || isAdmin ? (

diff --git a/apps/jonogon-web-next/src/components/custom/Navigation.tsx b/apps/jonogon-web-next/src/components/custom/Navigation.tsx
@@ -41,7 +41,7 @@ const Navigation = () => {
                     <div className={'flex flex-col -space-y-2'}>
                         <span className="text-3xl font-black">জনগণ</span>
                         <span className="text-neutral-600">
-                            আমাদের দাবির প্লাটফর্ম
+                            সবার দাবির প্লাটফর্ম
                         </span>
                     </div>
                 </Link>

diff --git a/apps/jonogon-web-next/src/components/custom/Preloader.tsx b/apps/jonogon-web-next/src/components/custom/Preloader.tsx