Fix include done switch bug and add shimmer for table

app/(internal-routes)/dashboard/page.tsx

@@ -1,3 +1,11 @@
 import { Dashboard } from '@/modules/dashboard'
+import { DashboardShimmer } from '@/modules/dashboard/components/dashboard-shimmer'
+import { Suspense } from 'react'
 
-export default Dashboard
+export default function DashboardPage() {
+  return (
+    <Suspense fallback={<DashboardShimmer />}>
+      <Dashboard />
+    </Suspense>
+  )
+}

components/todo-list-table.tsx

@@ -85,11 +85,17 @@ const TodoListTableRow = ({ todo, showActions }: TodoListTableRowProps) => {
 type TodoListTableBodyProps = {
   tasks?: TTask[]
   isLoading?: boolean
+  isPlaceholderData?: boolean
   showActions?: boolean
 }
 
-const TodoListTableBody = ({ tasks, isLoading, showActions }: TodoListTableBodyProps) => {
-  if (isLoading) {
+const TodoListTableBody = ({
+  tasks,
+  isLoading,
+  isPlaceholderData,
+  showActions,
+}: TodoListTableBodyProps) => {
+  if (isLoading || isPlaceholderData) {
     return (
       <TableBody>
         {new Array(5).fill(0).map((_, index) => (
@@ -137,6 +143,7 @@ export const TodoListTableRowShimmer = ({ showActions = true }: { showActions?:
 type TodoListTableProps = {
   tasks?: TTask[]
   isLoading?: boolean
+  isPlaceholderData?: boolean
   showActions?: boolean
   includeDone?: boolean
   onIncludeDoneChange?: (checked: boolean) => void
@@ -145,6 +152,7 @@ type TodoListTableProps = {
 export const TodoListTable = ({
   tasks,
   isLoading,
+  isPlaceholderData,
   showActions,
   includeDone,
   onIncludeDoneChange,
@@ -188,7 +196,7 @@ export const TodoListTable = ({
           containerClassName="w-full lg:max-w-xs"
           onChange={(e) => handleSearch(e.target.value)}
         />
-        {currentTab == DashboardTasksTableTabs.All && (
+        {currentTab !== DashboardTasksTableTabs.WatchList && (
           <div className="flex px-4">
             <Switch
               id="includeDoneTasks"
@@ -208,6 +216,7 @@ export const TodoListTable = ({
           <TodoListTableBody
             tasks={filteredTasks}
             isLoading={isLoading}
+            isPlaceholderData={isPlaceholderData}
             showActions={showActions}
           />
         </Table>

modules/dashboard/components/dashboard-tabs.tsx

@@ -12,13 +12,15 @@ type DashboardTabsProps = {
   tasks: TTask[]
   className?: string
   includeDone: boolean
+  isPlaceholderData: boolean
   onIncludeDoneChange: (checked: boolean) => void
 }
 
 export const DashboardTabs = ({
   tasks,
   className,
   includeDone,
+  isPlaceholderData,
   onIncludeDoneChange,
 }: DashboardTabsProps) => {
   const router = useRouter()
@@ -29,6 +31,16 @@ export const DashboardTabs = ({
   const handleTabChange = (value: string) => {
     const params = new URLSearchParams(searchParams)
     params.set('tab', value)
+
+    if (value === TabsConstants.WatchList) {
+      params.delete('status')
+    } else {
+      if (includeDone) {
+        params.set('status', 'Done')
+      } else {
+        params.delete('status')
+      }
+    }
     router.push(`${pathname}?${params.toString()}`)
   }
 
@@ -53,6 +65,7 @@ export const DashboardTabs = ({
           <TodoListTable
             showActions
             tasks={tasks}
+            isPlaceholderData={isPlaceholderData}
             includeDone={includeDone}
             onIncludeDoneChange={onIncludeDoneChange}
           />

modules/dashboard/components/dashboard-watchlist-table.tsx

@@ -1,9 +1,18 @@
+'use client'
+
 import { TasksApi } from '@/api/tasks/tasks.api'
 import { CommonPageError } from '@/components/common-page-error'
 import { TodoListTable } from '@/components/todo-list-table'
 import { useQuery } from '@tanstack/react-query'
+import { useSearchParams } from 'next/navigation'
+import { DashboardTasksTableTabs as TabsConstants } from '../constants'
 
 export const DashboardWatchlistTable = () => {
+  const searchParams = useSearchParams()
+  const tab = searchParams.get('tab')
+  const status = searchParams.get('status')
+  const isInvalidCombination = tab === TabsConstants.WatchList && status === 'Done'
+
   const { data, isLoading, isError } = useQuery({
     queryKey: TasksApi.getWatchListTasks.key,
     queryFn: TasksApi.getWatchListTasks.fn,
@@ -17,7 +26,7 @@ export const DashboardWatchlistTable = () => {
       })),
   })
 
-  if (isError) {
+  if (isError || isInvalidCombination) {
     return <CommonPageError />
   }
 

modules/dashboard/index.tsx

@@ -4,24 +4,47 @@ import { TasksApi } from '@/api/tasks/tasks.api'
 import { GetTaskReqDto } from '@/api/tasks/tasks.types'
 import { CommonPageError } from '@/components/common-page-error'
 import { PageContainer } from '@/components/page-container'
-import { useQuery } from '@tanstack/react-query'
-import { useState } from 'react'
+import { keepPreviousData, useQuery } from '@tanstack/react-query'
+import { usePathname, useRouter, useSearchParams } from 'next/navigation'
+import { useEffect, useRef, useState } from 'react'
 import { DashboardHeader } from './components/dashboard-header'
 import { DashboardShimmer } from './components/dashboard-shimmer'
 import { DashboardTabs } from './components/dashboard-tabs'
 import { DashboardWelcomeScreen } from './components/dashboard-welcome-screen'
 
 export const Dashboard = () => {
-  const [includeDoneTasks, setIncludeDoneTasks] = useState(false)
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const status = searchParams.get('status')
+  const isFirstLoad = useRef(true)
 
-  const queryParams: GetTaskReqDto | undefined = includeDoneTasks ? { status: 'DONE' } : undefined
+  const [includeDoneTasks, setIncludeDoneTasks] = useState(status === 'Done')
+  const handleIncludeDoneChange = (checked: boolean) => {
+    setIncludeDoneTasks(checked)
+
+    const params = new URLSearchParams(searchParams)
+    if (checked) {
+      params.set('status', 'Done')
+    } else {
+      params.delete('status')
+    }
+    router.push(`${pathname}?${params.toString()}`)
+  }
 
-  const { data, isLoading, isError } = useQuery({
+  const queryParams: GetTaskReqDto | undefined = includeDoneTasks ? { status: 'DONE' } : undefined
+  const { data, isLoading, isError, isPlaceholderData } = useQuery({
     queryKey: TasksApi.getTasks.key(queryParams),
     queryFn: () => TasksApi.getTasks.fn(queryParams),
+    placeholderData: keepPreviousData,
   })
+  useEffect(() => {
+    if (!isLoading) {
+      isFirstLoad.current = false
+    }
+  }, [isLoading])
 
-  if (isLoading) {
+  if (isLoading && isFirstLoad.current) {
     return <DashboardShimmer />
   }
 
@@ -40,8 +63,9 @@ export const Dashboard = () => {
       <div className="container mx-auto">
         <DashboardTabs
           tasks={data.tasks}
+          isPlaceholderData={isPlaceholderData}
           includeDone={includeDoneTasks}
-          onIncludeDoneChange={setIncludeDoneTasks}
+          onIncludeDoneChange={handleIncludeDoneChange}
         />
       </div>
     </PageContainer>