From 23faa66d48d06c7afdc8535e84208a78627ee7c8 Mon Sep 17 00:00:00 2001
From: Henry <henry_ball@hotmail.co.uk>
Date: Sun, 5 May 2024 15:12:20 +0100
Subject: [PATCH] feat: extend skeleton loaders

---
 src/components/SideNavigation.tsx            |   7 +-
 src/components/UserMenu.tsx                  |  58 +++---
 src/components/WorkspaceMenu.tsx             |  28 ++-
 src/components/dashboard.tsx                 |   4 +-
 src/providers/workspace.tsx                  |   5 +-
 src/views/card/components/LabelSelector.tsx  | 188 ++++++++++---------
 src/views/card/components/ListSelector.tsx   | 122 ++++++------
 src/views/card/components/MemberSelector.tsx | 173 +++++++++--------
 src/views/card/index.tsx                     |  18 +-
 9 files changed, 334 insertions(+), 269 deletions(-)

diff --git a/src/components/SideNavigation.tsx b/src/components/SideNavigation.tsx
index 0007984a..f79e729d 100644
--- a/src/components/SideNavigation.tsx
+++ b/src/components/SideNavigation.tsx
@@ -15,6 +15,7 @@ import WorkspaceMenu from "~/components/WorkspaceMenu";
 
 interface SideNavigationProps {
   user: UserType;
+  isLoading: boolean;
 }
 
 interface UserType {
@@ -22,7 +23,10 @@ interface UserType {
   image?: string | null | undefined;
 }
 
-export default function SideNavigation({ user }: SideNavigationProps) {
+export default function SideNavigation({
+  user,
+  isLoading,
+}: SideNavigationProps) {
   const pathname = usePathname();
   const { theme } = useTheme();
 
@@ -65,6 +69,7 @@ export default function SideNavigation({ user }: SideNavigationProps) {
         <UserMenu
           email={user?.email ?? ""}
           imageUrl={user?.image ?? undefined}
+          isLoading={isLoading}
         />
       </nav>
     </>
diff --git a/src/components/UserMenu.tsx b/src/components/UserMenu.tsx
index 4616e0a6..55ea899c 100644
--- a/src/components/UserMenu.tsx
+++ b/src/components/UserMenu.tsx
@@ -7,13 +7,18 @@ import createClient from "~/utils/supabase/client";
 interface UserMenuProps {
   imageUrl: string | undefined;
   email: string;
+  isLoading: boolean;
 }
 
 function classNames(...classes: string[]): string {
   return classes.filter(Boolean).join(" ");
 }
 
-export default function UserMenu({ imageUrl, email }: UserMenuProps) {
+export default function UserMenu({
+  imageUrl,
+  email,
+  isLoading,
+}: UserMenuProps) {
   const router = useRouter();
   const { theme, switchTheme } = useTheme();
 
@@ -28,28 +33,35 @@ export default function UserMenu({ imageUrl, email }: UserMenuProps) {
   return (
     <Menu as="div" className="relative inline-block w-full text-left">
       <div>
-        <Menu.Button className="flex w-full items-center rounded-md p-1.5 text-neutral-900 hover:bg-light-200 dark:text-dark-900 dark:hover:bg-dark-200 dark:hover:text-dark-1000">
-          {imageUrl ? (
-            <Image
-              src={imageUrl ?? ""}
-              className="h-8 w-8 rounded-full bg-gray-50"
-              width={30}
-              height={30}
-              alt=""
-            />
-          ) : (
-            <span className="inline-block h-6 w-6 overflow-hidden rounded-full bg-light-400 dark:bg-dark-400">
-              <svg
-                className="h-full w-full text-dark-700"
-                fill="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
-              </svg>
-            </span>
-          )}
-          <span className="mx-2 truncate text-sm">{email}</span>
-        </Menu.Button>
+        {isLoading ? (
+          <div className="flex">
+            <div className="h-[30px] w-[30px] animate-pulse rounded-full bg-light-200 dark:bg-dark-200" />
+            <div className="mx-2 h-[30px] w-[175px] animate-pulse rounded-md bg-light-200 dark:bg-dark-200" />
+          </div>
+        ) : (
+          <Menu.Button className="flex w-full items-center rounded-md p-1.5 text-neutral-900 hover:bg-light-200 dark:text-dark-900 dark:hover:bg-dark-200 dark:hover:text-dark-1000">
+            {imageUrl ? (
+              <Image
+                src={imageUrl ?? ""}
+                className="h-8 w-8 rounded-full bg-gray-50"
+                width={30}
+                height={30}
+                alt=""
+              />
+            ) : (
+              <span className="inline-block h-6 w-6 overflow-hidden rounded-full bg-light-400 dark:bg-dark-400">
+                <svg
+                  className="h-full w-full text-dark-700"
+                  fill="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
+                </svg>
+              </span>
+            )}
+            <span className="mx-2 truncate text-sm">{email}</span>
+          </Menu.Button>
+        )}
       </div>
 
       <Transition
diff --git a/src/components/WorkspaceMenu.tsx b/src/components/WorkspaceMenu.tsx
index 41b20483..7cddf84c 100644
--- a/src/components/WorkspaceMenu.tsx
+++ b/src/components/WorkspaceMenu.tsx
@@ -7,22 +7,30 @@ import { useWorkspace } from "~/providers/workspace";
 import { HiCheck } from "react-icons/hi2";
 
 export default function WorkspaceMenu() {
-  const { workspace, availableWorkspaces, switchWorkspace } = useWorkspace();
+  const { workspace, isLoading, availableWorkspaces, switchWorkspace } =
+    useWorkspace();
   const { openModal } = useModal();
 
   return (
     <Menu as="div" className="relative inline-block w-full pb-3 text-left">
       <div>
-        <Menu.Button className="mb-1 flex w-full items-center rounded-[5px] p-1.5 hover:bg-light-200 dark:hover:bg-dark-200">
-          <span className="inline-flex h-6 w-6 items-center justify-center rounded-[5px] bg-indigo-700">
-            <span className="text-xs font-bold leading-none text-white">
-              {workspace?.name.charAt(0).toUpperCase()}
+        {isLoading ? (
+          <div className="mb-1 flex p-1.5">
+            <div className="h-6 w-6 animate-pulse rounded-[5px] bg-light-200 dark:bg-dark-200" />
+            <div className="ml-2 h-6 w-[150px] animate-pulse rounded-[5px] bg-light-200 dark:bg-dark-200" />
+          </div>
+        ) : (
+          <Menu.Button className="mb-1 flex w-full items-center rounded-[5px] p-1.5 hover:bg-light-200 dark:hover:bg-dark-200">
+            <span className="inline-flex h-6 w-6 items-center justify-center rounded-[5px] bg-indigo-700">
+              <span className="text-xs font-bold leading-none text-white">
+                {workspace?.name.charAt(0).toUpperCase()}
+              </span>
             </span>
-          </span>
-          <span className="ml-2 text-sm font-bold text-neutral-900 dark:text-dark-1000">
-            {workspace?.name}
-          </span>
-        </Menu.Button>
+            <span className="ml-2 text-sm font-bold text-neutral-900 dark:text-dark-1000">
+              {workspace?.name}
+            </span>
+          </Menu.Button>
+        )}
       </div>
 
       <Transition
diff --git a/src/components/dashboard.tsx b/src/components/dashboard.tsx
index 5590ee9a..398b70a0 100644
--- a/src/components/dashboard.tsx
+++ b/src/components/dashboard.tsx
@@ -3,7 +3,7 @@ import SideNavigation from "./SideNavigation";
 import FeedbackButton from "./FeedbackButton";
 
 export default function Dashboard(props: { children: React.ReactNode }) {
-  const { data } = api.auth.getUser.useQuery();
+  const { data, isLoading } = api.auth.getUser.useQuery();
 
   return (
     <div className="flex h-screen flex-col items-center bg-light-100 dark:bg-dark-50">
@@ -17,7 +17,7 @@ export default function Dashboard(props: { children: React.ReactNode }) {
       </div>
 
       <div className="flex h-full w-full">
-        <SideNavigation user={{ email: data?.email }} />
+        <SideNavigation user={{ email: data?.email }} isLoading={isLoading} />
         <div className="w-full overflow-hidden">{props.children}</div>
       </div>
     </div>
diff --git a/src/providers/workspace.tsx b/src/providers/workspace.tsx
index 4691d1b8..91fff323 100644
--- a/src/providers/workspace.tsx
+++ b/src/providers/workspace.tsx
@@ -12,6 +12,7 @@ import { useRouter } from "next/navigation";
 
 interface WorkspaceContextProps {
   workspace: Workspace;
+  isLoading: boolean;
   switchWorkspace: (_workspace: Workspace) => void;
   availableWorkspaces: Workspace[];
 }
@@ -41,7 +42,7 @@ export const WorkspaceProvider: React.FC<{ children: ReactNode }> = ({
     initialAvailableWorkspaces,
   );
 
-  const { data } = api.workspace.all.useQuery();
+  const { data, isLoading } = api.workspace.all.useQuery();
 
   const switchWorkspace = (_workspace: Workspace) => {
     localStorage.setItem("workspacePublicId", _workspace.publicId);
@@ -97,7 +98,7 @@ export const WorkspaceProvider: React.FC<{ children: ReactNode }> = ({
 
   return (
     <WorkspaceContext.Provider
-      value={{ workspace, availableWorkspaces, switchWorkspace }}
+      value={{ workspace, isLoading, availableWorkspaces, switchWorkspace }}
     >
       {children}
     </WorkspaceContext.Provider>
diff --git a/src/views/card/components/LabelSelector.tsx b/src/views/card/components/LabelSelector.tsx
index 8064d9b1..0264d76b 100644
--- a/src/views/card/components/LabelSelector.tsx
+++ b/src/views/card/components/LabelSelector.tsx
@@ -14,11 +14,13 @@ interface LabelSelectorProps {
     selected: boolean;
     colourCode: string;
   }[];
+  isLoading: boolean;
 }
 
 export default function LabelSelector({
   cardPublicId,
   labels,
+  isLoading,
 }: LabelSelectorProps) {
   const { openModal } = useModal();
   const utils = api.useUtils();
@@ -47,104 +49,110 @@ export default function LabelSelector({
 
   return (
     <>
-      <Menu
-        as="div"
-        className="relative flex w-full flex-wrap items-center text-left"
-      >
-        {selectedLabels.length ? (
-          <>
-            {selectedLabels.map((label) => (
-              <Menu.Button
-                key={label.publicId}
-                className="my-1 mr-2 inline-flex w-fit items-center gap-x-1.5 rounded-full px-2 py-1 text-[12px] font-medium text-light-800 ring-1 ring-inset ring-light-600 dark:text-dark-1000 dark:ring-dark-800"
-              >
-                <svg
-                  fill={label.colourCode}
-                  className="h-2 w-2"
-                  viewBox="0 0 6 6"
-                  aria-hidden="true"
+      {isLoading ? (
+        <div className="flex w-full">
+          <div className="h-full w-[175px] animate-pulse rounded-[5px] bg-light-300 dark:bg-dark-300" />
+        </div>
+      ) : (
+        <Menu
+          as="div"
+          className="relative flex w-full flex-wrap items-center text-left"
+        >
+          {selectedLabels.length ? (
+            <>
+              {selectedLabels.map((label) => (
+                <Menu.Button
+                  key={label.publicId}
+                  className="my-1 mr-2 inline-flex w-fit items-center gap-x-1.5 rounded-full px-2 py-1 text-[12px] font-medium text-light-800 ring-1 ring-inset ring-light-600 dark:text-dark-1000 dark:ring-dark-800"
                 >
-                  <circle cx={3} cy={3} r={3} />
-                </svg>
-                <div>{label.name}</div>
+                  <svg
+                    fill={label.colourCode}
+                    className="h-2 w-2"
+                    viewBox="0 0 6 6"
+                    aria-hidden="true"
+                  >
+                    <circle cx={3} cy={3} r={3} />
+                  </svg>
+                  <div>{label.name}</div>
+                </Menu.Button>
+              ))}
+              <Menu.Button className="my-1 inline-flex w-fit items-center gap-x-1.5 rounded-full py-1 pl-2 pr-4 text-[12px] font-medium text-dark-800 ring-inset ring-dark-800 hover:bg-light-400 dark:hover:bg-dark-200">
+                <HiMiniPlus size={16} />
+                Add label
               </Menu.Button>
-            ))}
-            <Menu.Button className="my-1 inline-flex w-fit items-center gap-x-1.5 rounded-full py-1 pl-2 pr-4 text-[12px] font-medium text-dark-800 ring-inset ring-dark-800 hover:bg-light-400 dark:hover:bg-dark-200">
-              <HiMiniPlus size={16} />
+            </>
+          ) : (
+            <Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-200 pl-2 text-left text-sm text-neutral-900 hover:bg-light-300 dark:border-dark-100 dark:text-dark-1000 dark:hover:border-dark-300 dark:hover:bg-dark-200">
+              <HiMiniPlus size={22} className="pr-2" />
               Add label
             </Menu.Button>
-          </>
-        ) : (
-          <Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-200 pl-2 text-left text-sm text-neutral-900 hover:bg-light-300 dark:border-dark-100 dark:text-dark-1000 dark:hover:border-dark-300 dark:hover:bg-dark-200">
-            <HiMiniPlus size={22} className="pr-2" />
-            Add label
-          </Menu.Button>
-        )}
+          )}
 
-        <Transition
-          as={Fragment}
-          enter="transition ease-out duration-100"
-          enterFrom="transform opacity-0 scale-95"
-          enterTo="transform opacity-100 scale-100"
-          leave="transition ease-in duration-75"
-          leaveFrom="transform opacity-100 scale-100"
-          leaveTo="transform opacity-0 scale-95"
-        >
-          <Menu.Items className="absolute right-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] border-light-600 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
-            <div className="p-2">
-              <form onSubmit={formik.handleSubmit}>
-                {labels?.map((label) => (
-                  <Menu.Item key={label.publicId}>
-                    {() => (
-                      <div
-                        key={label.publicId}
-                        className="flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
-                        onClick={async (e) => {
-                          e.preventDefault();
-                          await formik.setFieldValue(
-                            label.publicId,
-                            !formik.values[label.publicId],
-                          );
+          <Transition
+            as={Fragment}
+            enter="transition ease-out duration-100"
+            enterFrom="transform opacity-0 scale-95"
+            enterTo="transform opacity-100 scale-100"
+            leave="transition ease-in duration-75"
+            leaveFrom="transform opacity-100 scale-100"
+            leaveTo="transform opacity-0 scale-95"
+          >
+            <Menu.Items className="absolute right-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] border-light-600 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
+              <div className="p-2">
+                <form onSubmit={formik.handleSubmit}>
+                  {labels?.map((label) => (
+                    <Menu.Item key={label.publicId}>
+                      {() => (
+                        <div
+                          key={label.publicId}
+                          className="flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
+                          onClick={async (e) => {
+                            e.preventDefault();
+                            await formik.setFieldValue(
+                              label.publicId,
+                              !formik.values[label.publicId],
+                            );
 
-                          addOrRemoveLabel.mutate({
-                            cardPublicId,
-                            labelPublicId: label.publicId,
-                          });
+                            addOrRemoveLabel.mutate({
+                              cardPublicId,
+                              labelPublicId: label.publicId,
+                            });
 
-                          await formik.submitForm();
-                        }}
-                      >
-                        <input
-                          id={label.publicId}
-                          name={label.publicId}
-                          type="checkbox"
-                          className="h-[14px] w-[14px] rounded bg-transparent"
-                          onClick={(event) => event.stopPropagation()}
-                          onChange={formik.handleChange}
-                          checked={formik.values[label.publicId]}
-                        />
-                        <label
-                          htmlFor={label.publicId}
-                          className="ml-3 text-sm"
+                            await formik.submitForm();
+                          }}
                         >
-                          {label.name}
-                        </label>
-                      </div>
-                    )}
-                  </Menu.Item>
-                ))}
-                <button
-                  onClick={() => openModal("NEW_LABEL")}
-                  className="flex w-full items-center rounded-[5px] p-1.5 px-2 text-sm hover:bg-light-200 dark:hover:bg-dark-300"
-                >
-                  <HiMiniPlus size={22} className="pr-2" />
-                  Create new label
-                </button>
-              </form>
-            </div>
-          </Menu.Items>
-        </Transition>
-      </Menu>
+                          <input
+                            id={label.publicId}
+                            name={label.publicId}
+                            type="checkbox"
+                            className="h-[14px] w-[14px] rounded bg-transparent"
+                            onClick={(event) => event.stopPropagation()}
+                            onChange={formik.handleChange}
+                            checked={formik.values[label.publicId]}
+                          />
+                          <label
+                            htmlFor={label.publicId}
+                            className="ml-3 text-sm"
+                          >
+                            {label.name}
+                          </label>
+                        </div>
+                      )}
+                    </Menu.Item>
+                  ))}
+                  <button
+                    onClick={() => openModal("NEW_LABEL")}
+                    className="flex w-full items-center rounded-[5px] p-1.5 px-2 text-sm hover:bg-light-200 dark:hover:bg-dark-300"
+                  >
+                    <HiMiniPlus size={22} className="pr-2" />
+                    Create new label
+                  </button>
+                </form>
+              </div>
+            </Menu.Items>
+          </Transition>
+        </Menu>
+      )}
     </>
   );
 }
diff --git a/src/views/card/components/ListSelector.tsx b/src/views/card/components/ListSelector.tsx
index 5a6f171e..51130d00 100644
--- a/src/views/card/components/ListSelector.tsx
+++ b/src/views/card/components/ListSelector.tsx
@@ -10,11 +10,13 @@ interface ListSelectorProps {
     name: string;
     selected: boolean;
   }[];
+  isLoading: boolean;
 }
 
 export default function ListSelector({
   cardPublicId,
   lists,
+  isLoading,
 }: ListSelectorProps) {
   const utils = api.useUtils();
 
@@ -42,66 +44,72 @@ export default function ListSelector({
 
   return (
     <>
-      <Menu
-        as="div"
-        className="relative flex w-full flex-wrap items-center text-left"
-      >
-        <Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-200 pl-2 text-left text-sm text-neutral-900 hover:border-light-300 hover:bg-light-300 dark:border-dark-100 dark:text-dark-1000 dark:hover:border-dark-300 dark:hover:bg-dark-200">
-          {selectedList?.name}
-        </Menu.Button>
-
-        <Transition
-          as={Fragment}
-          enter="transition ease-out duration-100"
-          enterFrom="transform opacity-0 scale-95"
-          enterTo="transform opacity-100 scale-100"
-          leave="transition ease-in duration-75"
-          leaveFrom="transform opacity-100 scale-100"
-          leaveTo="transform opacity-0 scale-95"
+      {isLoading ? (
+        <div className="flex w-full">
+          <div className="h-full w-[150px] animate-pulse rounded-[5px] bg-light-300 dark:bg-dark-300" />
+        </div>
+      ) : (
+        <Menu
+          as="div"
+          className="relative flex w-full flex-wrap items-center text-left"
         >
-          <Menu.Items className="absolute right-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] border-light-600 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
-            <div className="p-2">
-              <form onSubmit={formik.handleSubmit}>
-                {lists?.map((list) => (
-                  <Menu.Item key={list.publicId}>
-                    <div
-                      key={list.publicId}
-                      className="flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
-                      onClick={async (e) => {
-                        e.preventDefault();
-                        await formik.setFieldValue(
-                          list.publicId,
-                          !formik.values[list.publicId],
-                        );
+          <Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-200 pl-2 text-left text-sm text-neutral-900 hover:border-light-300 hover:bg-light-300 dark:border-dark-100 dark:text-dark-1000 dark:hover:border-dark-300 dark:hover:bg-dark-200">
+            {selectedList?.name}
+          </Menu.Button>
 
-                        updateCardList.mutate({
-                          cardId: cardPublicId,
-                          newListId: list.publicId,
-                        });
+          <Transition
+            as={Fragment}
+            enter="transition ease-out duration-100"
+            enterFrom="transform opacity-0 scale-95"
+            enterTo="transform opacity-100 scale-100"
+            leave="transition ease-in duration-75"
+            leaveFrom="transform opacity-100 scale-100"
+            leaveTo="transform opacity-0 scale-95"
+          >
+            <Menu.Items className="absolute right-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] border-light-600 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
+              <div className="p-2">
+                <form onSubmit={formik.handleSubmit}>
+                  {lists?.map((list) => (
+                    <Menu.Item key={list.publicId}>
+                      <div
+                        key={list.publicId}
+                        className="flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
+                        onClick={async (e) => {
+                          e.preventDefault();
+                          await formik.setFieldValue(
+                            list.publicId,
+                            !formik.values[list.publicId],
+                          );
 
-                        await formik.submitForm();
-                      }}
-                    >
-                      <input
-                        id={list.publicId}
-                        name={list.publicId}
-                        type="checkbox"
-                        className="h-[14px] w-[14px] rounded bg-transparent"
-                        onClick={(event) => event.stopPropagation()}
-                        onChange={formik.handleChange}
-                        checked={formik.values[list.publicId]}
-                      />
-                      <label htmlFor={list.publicId} className="ml-3 text-sm">
-                        {list.name}
-                      </label>
-                    </div>
-                  </Menu.Item>
-                ))}
-              </form>
-            </div>
-          </Menu.Items>
-        </Transition>
-      </Menu>
+                          updateCardList.mutate({
+                            cardId: cardPublicId,
+                            newListId: list.publicId,
+                          });
+
+                          await formik.submitForm();
+                        }}
+                      >
+                        <input
+                          id={list.publicId}
+                          name={list.publicId}
+                          type="checkbox"
+                          className="h-[14px] w-[14px] rounded bg-transparent"
+                          onClick={(event) => event.stopPropagation()}
+                          onChange={formik.handleChange}
+                          checked={formik.values[list.publicId]}
+                        />
+                        <label htmlFor={list.publicId} className="ml-3 text-sm">
+                          {list.name}
+                        </label>
+                      </div>
+                    </Menu.Item>
+                  ))}
+                </form>
+              </div>
+            </Menu.Items>
+          </Transition>
+        </Menu>
+      )}
     </>
   );
 }
diff --git a/src/views/card/components/MemberSelector.tsx b/src/views/card/components/MemberSelector.tsx
index a40f852b..8dd85e38 100644
--- a/src/views/card/components/MemberSelector.tsx
+++ b/src/views/card/components/MemberSelector.tsx
@@ -14,11 +14,13 @@ interface MemberSelectorProps {
     };
     selected: boolean;
   }[];
+  isLoading: boolean;
 }
 
 export default function LabelSelector({
   cardPublicId,
   members,
+  isLoading,
 }: MemberSelectorProps) {
   const utils = api.useUtils();
 
@@ -46,89 +48,98 @@ export default function LabelSelector({
 
   return (
     <>
-      <Menu
-        as="div"
-        className="relative flex w-full flex-wrap items-center text-left"
-      >
-        <Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-200 pl-2 text-left text-sm text-neutral-900 hover:bg-light-300 dark:border-dark-100 dark:text-dark-1000 dark:hover:border-dark-300 dark:hover:bg-dark-200">
-          {selectedMembers.length ? (
-            <div className="isolate flex -space-x-1 overflow-hidden">
-              {selectedMembers.map((member) => (
-                <span
-                  key={member.publicId}
-                  className="relative z-30 inline-flex h-6 w-6 items-center justify-center rounded-full bg-gray-500 ring-1 ring-light-200 dark:ring-dark-100"
-                >
-                  <span className="text-[10px] font-medium leading-none text-white">
-                    {member.user?.name
-                      ? member.user?.name
-                          .split(" ")
-                          .map((namePart) => namePart.charAt(0).toUpperCase())
-                          .join("")
-                      : null}
-                  </span>
-                </span>
-              ))}
-            </div>
-          ) : (
-            <>
-              <HiMiniPlus size={22} className="pr-2" />
-              {"Add member"}
-            </>
-          )}
-        </Menu.Button>
-
-        <Transition
-          as={Fragment}
-          enter="transition ease-out duration-100"
-          enterFrom="transform opacity-0 scale-95"
-          enterTo="transform opacity-100 scale-100"
-          leave="transition ease-in duration-75"
-          leaveFrom="transform opacity-100 scale-100"
-          leaveTo="transform opacity-0 scale-95"
+      {isLoading ? (
+        <div className="flex w-full">
+          <div className="h-full w-[125px] animate-pulse rounded-[5px] bg-light-300 dark:bg-dark-300" />
+        </div>
+      ) : (
+        <Menu
+          as="div"
+          className="relative flex w-full flex-wrap items-center text-left"
         >
-          <Menu.Items className="absolute right-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] border-light-600 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
-            <div className="p-2">
-              <form onSubmit={formik.handleSubmit}>
-                {members?.map((member) => (
-                  <Menu.Item key={member.publicId}>
-                    <div
-                      key={member.publicId}
-                      className="flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
-                      onClick={async (e) => {
-                        e.preventDefault();
-                        await formik.setFieldValue(
-                          member.publicId,
-                          !formik.values[member.publicId],
-                        );
-
-                        addOrRemoveMember.mutate({
-                          cardPublicId,
-                          workspaceMemberPublicId: member.publicId,
-                        });
-
-                        await formik.submitForm();
-                      }}
-                    >
-                      <input
-                        id={member.publicId}
-                        name={member.publicId}
-                        type="checkbox"
-                        className="h-[14px] w-[14px] rounded bg-transparent"
-                        onClick={(event) => event.stopPropagation()}
-                        onChange={formik.handleChange}
-                        checked={formik.values[member.publicId]}
-                      />
-                      <label htmlFor={member.publicId} className="ml-3 text-sm">
-                        {member?.user?.name}
-                      </label>
-                    </div>
-                  </Menu.Item>
+          <Menu.Button className="flex h-full w-full items-center rounded-[5px] border-[1px] border-light-200 pl-2 text-left text-sm text-neutral-900 hover:bg-light-300 dark:border-dark-100 dark:text-dark-1000 dark:hover:border-dark-300 dark:hover:bg-dark-200">
+            {selectedMembers.length ? (
+              <div className="isolate flex -space-x-1 overflow-hidden">
+                {selectedMembers.map((member) => (
+                  <span
+                    key={member.publicId}
+                    className="relative z-30 inline-flex h-6 w-6 items-center justify-center rounded-full bg-gray-500 ring-1 ring-light-200 dark:ring-dark-100"
+                  >
+                    <span className="text-[10px] font-medium leading-none text-white">
+                      {member.user?.name
+                        ? member.user?.name
+                            .split(" ")
+                            .map((namePart) => namePart.charAt(0).toUpperCase())
+                            .join("")
+                        : null}
+                    </span>
+                  </span>
                 ))}
-              </form>
-            </div>
-          </Menu.Items>
-        </Transition>
-      </Menu>
+              </div>
+            ) : (
+              <>
+                <HiMiniPlus size={22} className="pr-2" />
+                {"Add member"}
+              </>
+            )}
+          </Menu.Button>
+
+          <Transition
+            as={Fragment}
+            enter="transition ease-out duration-100"
+            enterFrom="transform opacity-0 scale-95"
+            enterTo="transform opacity-100 scale-100"
+            leave="transition ease-in duration-75"
+            leaveFrom="transform opacity-100 scale-100"
+            leaveTo="transform opacity-0 scale-95"
+          >
+            <Menu.Items className="absolute right-[200px] top-[30px] z-10 mt-2 w-56 origin-top-right rounded-md border-[1px] border-light-600 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200">
+              <div className="p-2">
+                <form onSubmit={formik.handleSubmit}>
+                  {members?.map((member) => (
+                    <Menu.Item key={member.publicId}>
+                      <div
+                        key={member.publicId}
+                        className="flex items-center rounded-[5px] p-2 hover:bg-light-200 dark:hover:bg-dark-300"
+                        onClick={async (e) => {
+                          e.preventDefault();
+                          await formik.setFieldValue(
+                            member.publicId,
+                            !formik.values[member.publicId],
+                          );
+
+                          addOrRemoveMember.mutate({
+                            cardPublicId,
+                            workspaceMemberPublicId: member.publicId,
+                          });
+
+                          await formik.submitForm();
+                        }}
+                      >
+                        <input
+                          id={member.publicId}
+                          name={member.publicId}
+                          type="checkbox"
+                          className="h-[14px] w-[14px] rounded bg-transparent"
+                          onClick={(event) => event.stopPropagation()}
+                          onChange={formik.handleChange}
+                          checked={formik.values[member.publicId]}
+                        />
+                        <label
+                          htmlFor={member.publicId}
+                          className="ml-3 text-sm"
+                        >
+                          {member?.user?.name}
+                        </label>
+                      </div>
+                    </Menu.Item>
+                  ))}
+                </form>
+              </div>
+            </Menu.Items>
+          </Transition>
+        </Menu>
+      )}
     </>
   );
 }
diff --git a/src/views/card/index.tsx b/src/views/card/index.tsx
index eeed7d3f..d6000ce1 100644
--- a/src/views/card/index.tsx
+++ b/src/views/card/index.tsx
@@ -152,15 +152,27 @@ export default function CardPage() {
       <div className="min-w-[325px] border-l-[1px] border-light-600 bg-light-200 p-8 text-light-900 dark:border-dark-400 dark:bg-dark-100 dark:text-dark-900">
         <div className="mb-4 flex w-full">
           <p className="my-2 w-[100px] text-sm">List</p>
-          <ListSelector cardPublicId={cardId} lists={formattedLists} />
+          <ListSelector
+            cardPublicId={cardId}
+            lists={formattedLists}
+            isLoading={isLoading}
+          />
         </div>
         <div className="mb-4 flex w-full">
           <p className="my-2 w-[100px] text-sm">Labels</p>
-          <LabelSelector cardPublicId={cardId} labels={formattedLabels} />
+          <LabelSelector
+            cardPublicId={cardId}
+            labels={formattedLabels}
+            isLoading={isLoading}
+          />
         </div>
         <div className="flex w-full">
           <p className="my-2 w-[100px] text-sm">Members</p>
-          <MemberSelector cardPublicId={cardId} members={formattedMembers} />
+          <MemberSelector
+            cardPublicId={cardId}
+            members={formattedMembers}
+            isLoading={isLoading}
+          />
         </div>
       </div>