fix: prevent filters from refreshing on selection

apps/web/src/views/board/components/Filters.tsx

@@ -13,59 +13,30 @@ import LabelIcon from "~/components/LabelIcon";
 import { formatMemberDisplayName, formatToArray } from "~/utils/helpers";
 import { getPublicUrl } from "~/utils/supabase/getPublicUrl";
 
-interface BoardData {
+interface Member {
+  publicId: string;
+  user: {
+    name: string | null;
+    image: string | null;
+    email: string;
+  } | null;
+}
+
+interface Label {
   publicId: string;
   name: string;
-  slug: string;
+  colourCode: string | null;
-  workspace: {
-    publicId: string;
-    members?: {
-      publicId: string;
-      user: {
-        name: string | null;
-        image: string | null;
-        email: string;
-      } | null;
-    }[];
-  } | null;
-  labels: {
-    publicId: string;
-    name: string;
-    colourCode: string | null;
-  }[];
-  lists: {
-    publicId: string;
-    name: string;
-    boardId: number;
-    index: number;
-    cards: {
-      publicId: string;
-      title: string;
-      description: string | null;
-      listId: number;
-      index: number;
-      labels: {
-        publicId: string;
-        name: string;
-        colourCode: string | null;
-      }[];
-      members?: {
-        publicId: string;
-        user: {
-          name: string | null;
-        } | null;
-      }[];
-    }[];
-  }[];
 }
 
 const Filters = ({
   position = "right",
-  boardData,
+  labels,
+  members,
   isLoading,
 }: {
   position?: "left" | "right";
-  boardData: BoardData | null;
+  labels: Label[];
+  members: Member[];
   isLoading: boolean;
 }) => {
   const router = useRouter();
@@ -84,33 +55,31 @@ const Filters = ({
     }
   };
 
-  const formattedMembers =
+  const formattedMembers = members.map((member) => ({
-    boardData?.workspace?.members?.map((member) => ({
+    key: member.publicId,
-      key: member.publicId,
+    value: formatMemberDisplayName(
-      value: formatMemberDisplayName(
+      member.user?.name ?? null,
-        member.user?.name ?? null,
+      member.user?.email ?? null,
-        member.user?.email ?? null,
+    ),
-      ),
+    selected: !!router.query.members?.includes(member.publicId),
-      selected: !!router.query.members?.includes(member.publicId),
+    leftIcon: (
-      leftIcon: (
+      <Avatar
-        <Avatar
+        size="xs"
-          size="xs"
+        name={member.user?.name ?? ""}
-          name={member.user?.name ?? ""}
+        imageUrl={
-          imageUrl={
+          member.user?.image ? getPublicUrl(member.user.image) : undefined
-            member.user?.image ? getPublicUrl(member.user.image) : undefined
+        }
-          }
+        email={member.user?.email ?? ""}
-          email={member.user?.email ?? ""}
+      />
-        />
+    ),
-      ),
+  }));
-    })) ?? [];
 
-  const formattedLabels =
+  const formattedLabels = labels.map((label) => ({
-    boardData?.labels.map((label) => ({
+    key: label.publicId,
-      key: label.publicId,
+    value: label.name,
-      value: label.name,
+    selected: !!router.query.labels?.includes(label.publicId),
-      selected: !!router.query.labels?.includes(label.publicId),
+    leftIcon: <LabelIcon colourCode={label.colourCode} />,
-      leftIcon: <LabelIcon colourCode={label.colourCode} />,
+  }));
-    })) ?? [];
 
   const groups = [
     ...(formattedMembers.length

apps/web/src/views/board/index.tsx

@@ -2,6 +2,7 @@ import type { DropResult } from "react-beautiful-dnd";
 import Link from "next/link";
 import { useParams } from "next/navigation";
 import { useRouter } from "next/router";
+import { keepPreviousData } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 import { DragDropContext, Draggable } from "react-beautiful-dnd";
 import { useForm } from "react-hook-form";
@@ -74,6 +75,7 @@ export default function BoardPage() {
     isLoading: isQueryLoading,
   } = api.board.byId.useQuery(queryParams, {
     enabled: !!boardId,
+    placeholderData: keepPreviousData,
   });
 
   useEffect(() => {
@@ -245,7 +247,8 @@ export default function BoardPage() {
               isAdmin={workspace.role === "admin"}
             />
             <Filters
-              boardData={boardData ?? null}
+              labels={boardData?.labels ?? []}
+              members={boardData?.workspace?.members ?? []}
               position="left"
               isLoading={isLoading}
             />

apps/web/src/views/public/board/index.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
+import { keepPreviousData } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
 import { HiLink } from "react-icons/hi2";
 
@@ -32,7 +33,7 @@ export default function PublicBoardView() {
       members: formatToArray(router.query.members),
       labels: formatToArray(router.query.labels),
     },
-    { enabled: !!boardSlug },
+    { enabled: !!boardSlug, placeholderData: keepPreviousData },
   );
 
   const CopyBoardLink = () => {
@@ -104,7 +105,11 @@ export default function PublicBoardView() {
               </h1>
             )}
             <div className="flex items-center space-x-2">
-              <Filters boardData={data ?? null} />
+              <Filters
+                labels={data?.labels ?? []}
+                members={[]}
+                isLoading={isLoading}
+              />
             </div>
           </div>