feat: skeleton loaders

src/views/board/components/List.tsx

@@ -64,7 +64,7 @@ export default function List({
           ref={provided.innerRef}
           {...provided.draggableProps}
           {...provided.dragHandleProps}
-          className="dark-text-dark-1000 mr-5 h-fit min-w-[18rem] max-w-[18rem] rounded-md border border-light-400 bg-light-300 py-2 pl-2 pr-1 text-neutral-900 dark:border-dark-400 dark:bg-dark-200"
+          className="dark-text-dark-1000 mr-5 h-fit min-w-[18rem] max-w-[18rem] rounded-md border border-light-400 bg-light-300 py-2 pl-2 pr-1 text-neutral-900 dark:border-dark-300 dark:bg-dark-100"
         >
           <div className="flex justify-between">
             <form

src/views/board/index.tsx

@@ -66,8 +66,6 @@ export default function BoardPage() {
   const [selectedPublicListId, setSelectedPublicListId] =
     useState<PublicListId>("");
 
-  console.log({ boardData });
-
   const boardId = params?.boardId?.length ? params.boardId[0] : null;
 
   const updateBoard = api.board.update.useMutation();
@@ -86,7 +84,7 @@ export default function BoardPage() {
     enableReinitialize: true,
   });
 
-  const { data, isSuccess } = api.board.byId.useQuery(
+  const { data, isSuccess, isLoading } = api.board.byId.useQuery(
     { id: boardId ?? "" },
     {
       enabled: !!boardId,
@@ -94,7 +92,6 @@ export default function BoardPage() {
   );
 
   if (isSuccess && data) {
-    console.log({ data });
     setBoardData(data);
   }
 
@@ -197,6 +194,11 @@ export default function BoardPage() {
       </div>
 
       <div className="z-20 flex w-full justify-between p-8 ">
+        {isLoading ? (
+          <div className="flex space-x-2">
+            <div className="h-[2.3rem] w-[150px] animate-pulse rounded-[5px] bg-light-200 dark:bg-dark-200" />
+          </div>
+        ) : (
           <form
             onSubmit={formik.handleSubmit}
             className="focus-visible:outline-none"
@@ -211,6 +213,8 @@ export default function BoardPage() {
               className="block border-0 bg-transparent p-0 py-0 font-medium leading-[2.3rem] tracking-tight text-neutral-900 focus:ring-0 focus-visible:outline-none dark:text-dark-1000 sm:text-[1.2rem]"
             />
           </form>
+        )}
+
         <div className="flex items-center">
           <button
             type="button"
@@ -228,8 +232,19 @@ export default function BoardPage() {
       </div>
 
       <div className="scrollbar-w-none z-10 flex-1 overflow-y-hidden overflow-x-scroll overscroll-contain pb-5 scrollbar scrollbar-track-light-200 scrollbar-thumb-light-400 scrollbar-track-rounded-[4px] scrollbar-thumb-rounded-[4px] scrollbar-h-[8px] dark:scrollbar-track-dark-100 dark:scrollbar-thumb-dark-300">
+        {isLoading ? (
+          <div className="ml-[2rem] flex">
+            <div className="0 mr-5 h-[500px] w-[18rem] animate-pulse rounded-md bg-light-200 dark:bg-dark-200" />
+            <div className="0 mr-5 h-[275px] w-[18rem] animate-pulse rounded-md bg-light-200 dark:bg-dark-200" />
+            <div className="0 mr-5 h-[375px] w-[18rem] animate-pulse rounded-md bg-light-200 dark:bg-dark-200" />
+          </div>
+        ) : (
           <DragDropContext onDragEnd={onDragEnd}>
-          <Droppable droppableId="all-lists" direction="horizontal" type="LIST">
+            <Droppable
+              droppableId="all-lists"
+              direction="horizontal"
+              type="LIST"
+            >
               {(provided) => (
                 <div
                   className="flex"
@@ -263,7 +278,7 @@ export default function BoardPage() {
                                   <Link
                                     key={card.publicId}
                                     href={`/cards/${card.publicId}`}
-                                  className="mb-2 flex !cursor-pointer flex-col rounded-md border border-light-200 bg-light-50 px-3 py-2 text-sm text-neutral-900 dark:border-dark-200 dark:bg-dark-500 dark:text-dark-1000"
+                                    className="mb-2 flex !cursor-pointer flex-col rounded-md border border-light-200 bg-light-50 px-3 py-2 text-sm text-neutral-900 dark:border-dark-200 dark:bg-dark-300 dark:text-dark-1000 dark:hover:bg-dark-400"
                                     ref={provided.innerRef}
                                     {...provided.draggableProps}
                                     {...provided.dragHandleProps}
@@ -325,6 +340,7 @@ export default function BoardPage() {
               )}
             </Droppable>
           </DragDropContext>
+        )}
       </div>
       <Modal>
         {modalContentType === "DELETE_BOARD" && <DeleteBoardConfirmation />}

src/views/boards/components/BoardsList.tsx

@@ -6,11 +6,20 @@ import { useWorkspace } from "~/providers/workspace";
 export function BoardsList() {
   const { workspace } = useWorkspace();
 
-  const { data } = api.board.all.useQuery(
+  const { data, isLoading } = api.board.all.useQuery(
     { workspacePublicId: workspace?.publicId },
     { enabled: workspace?.publicId ? true : false },
   );
 
+  if (isLoading)
+    return (
+      <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xxl:grid-cols-5">
+        <div className="mr-5 flex h-[150px] w-full animate-pulse rounded-md bg-light-200 dark:bg-dark-200" />
+        <div className="mr-5 flex h-[150px] w-full animate-pulse rounded-md bg-light-200 dark:bg-dark-200" />
+        <div className="mr-5 flex h-[150px] w-full animate-pulse rounded-md bg-light-200 dark:bg-dark-200" />
+      </div>
+    );
+
   if (data?.length === 0) return <></>;
 
   return (

src/views/card/index.tsx

@@ -31,7 +31,7 @@ export default function CardPage() {
     ? params.cardId[0]
     : params?.cardId;
 
-  const { data, error } = api.card.byId.useQuery({ id: cardId ?? "" });
+  const { data, isLoading } = api.card.byId.useQuery({ id: cardId ?? "" });
 
   const board = data?.list?.board;
   const boardId = board?.publicId;
@@ -40,8 +40,6 @@ export default function CardPage() {
   const selectedLabels = data?.labels;
   const selectedMembers = data?.members;
 
-  console.log({ board: error });
-
   const formattedLabels =
     labels?.map((label) => {
       const isSelected = selectedLabels?.some(
@@ -98,6 +96,13 @@ export default function CardPage() {
     <div className="flex h-full flex-1 flex-row">
       <div className="w-full p-8">
         <div className="mb-8 flex w-full items-center justify-between">
+          {isLoading ? (
+            <div className="flex space-x-2">
+              <div className="h-[2.3rem] w-[150px] animate-pulse rounded-[5px] bg-light-300 dark:bg-dark-300" />
+              <div className="h-[2.3rem] w-[300px] animate-pulse rounded-[5px] bg-light-300 dark:bg-dark-300" />
+            </div>
+          ) : (
+            <>
               <Link
                 className="whitespace-nowrap font-medium leading-[2.3rem] tracking-tight text-light-900 dark:text-dark-900 sm:text-[1.2rem]"
                 href={`/boards/${board?.publicId}`}
@@ -124,6 +129,8 @@ export default function CardPage() {
               <div className="flex">
                 <Dropdown />
               </div>
+            </>
+          )}
         </div>
         <div className="mb-8 flex w-full max-w-2xl justify-between">
           <form onSubmit={formik.handleSubmit} className="w-full space-y-6">