From 23b940bde13ca3b19d597a01d75cea47006e8667 Mon Sep 17 00:00:00 2001
From: Neeraj-gagat <neerajgagat9999@gmail.com>
Date: Fri, 14 Nov 2025 14:52:31 +0530
Subject: [PATCH] Added loading Skeleton

---
 .../HomeComponents/Tasks/Task-Skeleton.tsx    |  26 +
 .../components/HomeComponents/Tasks/Tasks.tsx | 671 +++++++++---------
 2 files changed, 369 insertions(+), 328 deletions(-)
 create mode 100644 frontend/src/components/HomeComponents/Tasks/Task-Skeleton.tsx

diff --git a/frontend/src/components/HomeComponents/Tasks/Task-Skeleton.tsx b/frontend/src/components/HomeComponents/Tasks/Task-Skeleton.tsx
new file mode 100644
index 00000000..6b722d62
--- /dev/null
+++ b/frontend/src/components/HomeComponents/Tasks/Task-Skeleton.tsx
@@ -0,0 +1,26 @@
+import { TableCell, TableRow } from '@/components/ui/table';
+
+export const Taskskeleton = ({ count }: { count: number }) => {
+  return (
+    <>
+      {Array.from({ length: count }).map((_, i) => (
+        <TableRow key={i} className="animate-pulse">
+          <TableCell className="py-3">
+            <div className="h-5 w-6 bg-[#252528] rounded-md"></div>
+          </TableCell>
+
+          <TableCell className="py-3">
+            <div className="flex items-center space-x-2">
+              <div className="h-4 w-4 bg-[#252528] rounded-full"></div>
+              <div className="h-5 w-16 md:w-48 bg-[#252528] rounded-xl"></div>
+              <div className="h-5 w-12 md:w-16 bg-[#252528] rounded-xl"></div>
+            </div>
+          </TableCell>
+          <TableCell className="py-3">
+            <div className="h-5 w-6 bg-[#252528] rounded-md"></div>
+          </TableCell>
+        </TableRow>
+      ))}
+    </>
+  );
+};
diff --git a/frontend/src/components/HomeComponents/Tasks/Tasks.tsx b/frontend/src/components/HomeComponents/Tasks/Tasks.tsx
index 2f2e4b7d..816a01ef 100644
--- a/frontend/src/components/HomeComponents/Tasks/Tasks.tsx
+++ b/frontend/src/components/HomeComponents/Tasks/Tasks.tsx
@@ -60,6 +60,7 @@ import {
   TasksDatabase,
 } from './hooks';
 import { debounce } from '@/components/utils/utils';
+import { Taskskeleton } from './Task-Skeleton';
 
 const db = new TasksDatabase();
 export let syncTasksWithTwAndDb: () => any;
@@ -250,6 +251,8 @@ export const Tasks = (
     } catch (error) {
       console.error('Error syncing tasks:', error);
       toast.error(`Failed to sync tasks. Please try again.`);
+    } finally {
+      props.setIsLoading(false);
     }
   }, [props.email, props.encryptionSecret, props.UUID]); // Add dependencies
 
@@ -723,7 +726,13 @@ export const Tasks = (
                       </Dialog>
                     </div>
                     <div className="flex flex-col items-end gap-2">
-                      <Button variant="outline" onClick={syncTasksWithTwAndDb}>
+                      <Button
+                        variant="outline"
+                        onClick={() => (
+                          props.setIsLoading(true),
+                          syncTasksWithTwAndDb()
+                        )}
+                      >
                         Sync
                       </Button>
                     </div>
@@ -770,96 +779,200 @@ export const Tasks = (
                     </TableHeader>
                     <TableBody>
                       {/* Display tasks */}
-                      {currentTasks.map((task: Task, index: number) => (
-                        <Dialog
-                          onOpenChange={(_isDialogOpen) =>
-                            handleDialogOpenChange(_isDialogOpen, task)
-                          }
-                          key={index}
-                        >
-                          <DialogTrigger asChild>
-                            <TableRow key={index} className="border-b">
-                              {/* Display task details */}
-                              <TableCell className="py-2">
-                                <span className="text-s text-foreground">
-                                  {task.id}
-                                </span>
-                              </TableCell>
-                              <TableCell className="flex items-center space-x-2 py-2">
-                                {task.priority === 'H' && (
-                                  <div className="flex items-center justify-center w-3 h-3 bg-red-500 rounded-full border-0 min-w-3"></div>
-                                )}
-                                {task.priority === 'M' && (
-                                  <div className="flex items-center justify-center w-3 h-3 bg-yellow-500 rounded-full border-0 min-w-3"></div>
-                                )}
-                                {task.priority != 'H' &&
-                                  task.priority != 'M' && (
-                                    <div className="flex items-center justify-center w-3 h-3 bg-green-500 rounded-full border-0 min-w-3"></div>
+                      {props.isLoading ? (
+                        <Taskskeleton count={tasksPerPage} />
+                      ) : (
+                        currentTasks.map((task: Task, index: number) => (
+                          <Dialog
+                            onOpenChange={(_isDialogOpen) =>
+                              handleDialogOpenChange(_isDialogOpen, task)
+                            }
+                            key={index}
+                          >
+                            <DialogTrigger asChild>
+                              <TableRow key={index} className="border-b">
+                                {/* Display task details */}
+                                <TableCell className="py-2">
+                                  <span className="text-s text-foreground">
+                                    {task.id}
+                                  </span>
+                                </TableCell>
+                                <TableCell className="flex items-center space-x-2 py-2">
+                                  {task.priority === 'H' && (
+                                    <div className="flex items-center justify-center w-3 h-3 bg-red-500 rounded-full border-0 min-w-3"></div>
                                   )}
-                                <span className="text-s text-foreground">
-                                  {task.description}
-                                </span>
-                                {task.project != '' && (
-                                  <Badge variant={'secondary'}>
-                                    <Folder className="pr-2" />
-                                    {task.project === '' ? '' : task.project}
-                                  </Badge>
-                                )}
-                              </TableCell>
-                              <TableCell className="py-2">
-                                <Badge
-                                  variant={
-                                    task.status === 'pending'
-                                      ? 'secondary'
+                                  {task.priority === 'M' && (
+                                    <div className="flex items-center justify-center w-3 h-3 bg-yellow-500 rounded-full border-0 min-w-3"></div>
+                                  )}
+                                  {task.priority != 'H' &&
+                                    task.priority != 'M' && (
+                                      <div className="flex items-center justify-center w-3 h-3 bg-green-500 rounded-full border-0 min-w-3"></div>
+                                    )}
+                                  <span className="text-s text-foreground">
+                                    {task.description}
+                                  </span>
+                                  {task.project != '' && (
+                                    <Badge variant={'secondary'}>
+                                      <Folder className="pr-2" />
+                                      {task.project === '' ? '' : task.project}
+                                    </Badge>
+                                  )}
+                                </TableCell>
+                                <TableCell className="py-2">
+                                  <Badge
+                                    variant={
+                                      task.status === 'pending'
+                                        ? 'secondary'
+                                        : task.status === 'deleted'
+                                          ? 'destructive'
+                                          : 'default'
+                                    }
+                                  >
+                                    {task.status === 'completed'
+                                      ? 'C'
                                       : task.status === 'deleted'
-                                        ? 'destructive'
-                                        : 'default'
-                                  }
-                                >
-                                  {task.status === 'completed'
-                                    ? 'C'
-                                    : task.status === 'deleted'
-                                      ? 'D'
-                                      : 'P'}
-                                </Badge>
-                              </TableCell>
-                            </TableRow>
-                          </DialogTrigger>
-                          <DialogContent className="sm:max-w-[625px] max-h-[90vh] flex flex-col">
-                            <DialogHeader>
-                              <DialogTitle>
-                                <span className="ml-0 mb-0 mr-0 text-2xl mt-0 md:text-2xl font-bold">
-                                  <span className="inline bg-gradient-to-r from-[#F596D3]  to-[#D247BF] text-transparent bg-clip-text">
-                                    Task{' '}
+                                        ? 'D'
+                                        : 'P'}
+                                  </Badge>
+                                </TableCell>
+                              </TableRow>
+                            </DialogTrigger>
+                            <DialogContent className="sm:max-w-[625px] max-h-[90vh] flex flex-col">
+                              <DialogHeader>
+                                <DialogTitle>
+                                  <span className="ml-0 mb-0 mr-0 text-2xl mt-0 md:text-2xl font-bold">
+                                    <span className="inline bg-gradient-to-r from-[#F596D3]  to-[#D247BF] text-transparent bg-clip-text">
+                                      Task{' '}
+                                    </span>
+                                    Details
                                   </span>
-                                  Details
-                                </span>
-                              </DialogTitle>
-                            </DialogHeader>
+                                </DialogTitle>
+                              </DialogHeader>
 
-                            {/* Scrollable content */}
-                            <div className="overflow-y-auto flex-1">
-                              <DialogDescription asChild>
-                                <Table>
-                                  <TableBody>
-                                    <TableRow>
-                                      <TableCell>ID:</TableCell>
-                                      <TableCell>{task.id}</TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                      <TableCell>Description:</TableCell>
-                                      <TableCell>
-                                        {isEditing ? (
-                                          <>
+                              {/* Scrollable content */}
+                              <div className="overflow-y-auto flex-1">
+                                <DialogDescription asChild>
+                                  <Table>
+                                    <TableBody>
+                                      <TableRow>
+                                        <TableCell>ID:</TableCell>
+                                        <TableCell>{task.id}</TableCell>
+                                      </TableRow>
+                                      <TableRow>
+                                        <TableCell>Description:</TableCell>
+                                        <TableCell>
+                                          {isEditing ? (
+                                            <>
+                                              <div className="flex items-center">
+                                                <Input
+                                                  id={`description-${task.id}`}
+                                                  name={`description-${task.id}`}
+                                                  type="text"
+                                                  value={editedDescription}
+                                                  onChange={(e) =>
+                                                    setEditedDescription(
+                                                      e.target.value
+                                                    )
+                                                  }
+                                                  className="flex-grow mr-2"
+                                                />
+                                                <Button
+                                                  variant="ghost"
+                                                  size="icon"
+                                                  onClick={() =>
+                                                    handleSaveClick(task)
+                                                  }
+                                                >
+                                                  <CheckIcon className="h-4 w-4 text-green-500" />
+                                                </Button>
+                                                <Button
+                                                  variant="ghost"
+                                                  size="icon"
+                                                  onClick={handleCancelClick}
+                                                >
+                                                  <XIcon className="h-4 w-4 text-red-500" />
+                                                </Button>
+                                              </div>
+                                            </>
+                                          ) : (
+                                            <>
+                                              <span>{task.description}</span>
+                                              <Button
+                                                variant="ghost"
+                                                size="icon"
+                                                onClick={() =>
+                                                  handleEditClick(
+                                                    task.description
+                                                  )
+                                                }
+                                              >
+                                                <PencilIcon className="h-4 w-4 text-gray-500" />
+                                              </Button>
+                                            </>
+                                          )}
+                                        </TableCell>
+                                      </TableRow>
+                                      <TableRow>
+                                        <TableCell>Due:</TableCell>
+                                        <TableCell>
+                                          {formattedDate(task.due)}
+                                        </TableCell>
+                                      </TableRow>
+                                      <TableRow>
+                                        <TableCell>Start:</TableCell>
+                                        <TableCell>
+                                          {formattedDate(task.start)}
+                                        </TableCell>
+                                      </TableRow>
+                                      <TableRow>
+                                        <TableCell>End:</TableCell>
+                                        <TableCell>
+                                          {formattedDate(task.end)}
+                                        </TableCell>
+                                      </TableRow>
+                                      <TableRow>
+                                        <TableCell>Wait:</TableCell>
+                                        <TableCell>
+                                          {formattedDate(task.wait)}
+                                        </TableCell>
+                                      </TableRow>
+                                      <TableRow>
+                                        <TableCell>Depends:</TableCell>
+                                        <TableCell>{task.depends}</TableCell>
+                                      </TableRow>
+                                      <TableRow>
+                                        <TableCell>Recur:</TableCell>
+                                        <TableCell>{task.recur}</TableCell>
+                                      </TableRow>
+                                      <TableRow>
+                                        <TableCell>RType:</TableCell>
+                                        <TableCell>{task.rtype}</TableCell>
+                                      </TableRow>
+                                      <TableRow>
+                                        <TableCell>Priority:</TableCell>
+                                        <TableCell>{task.priority}</TableCell>
+                                      </TableRow>
+                                      <TableRow>
+                                        <TableCell>Project:</TableCell>
+                                        <TableCell>{task.project}</TableCell>
+                                      </TableRow>
+                                      <TableRow>
+                                        <TableCell>Status:</TableCell>
+                                        <TableCell>{task.status}</TableCell>
+                                      </TableRow>
+                                      <TableRow>
+                                        <TableCell>Tags:</TableCell>
+                                        <TableCell>
+                                          {isEditingTags ? (
                                             <div className="flex items-center">
                                               <Input
-                                                id={`description-${task.id}`}
-                                                name={`description-${task.id}`}
                                                 type="text"
-                                                value={editedDescription}
+                                                value={editedTags.join(', ')}
                                                 onChange={(e) =>
-                                                  setEditedDescription(
+                                                  setEditedTags(
                                                     e.target.value
+                                                      .split(',')
+                                                      .map((tag) => tag.trim())
                                                   )
                                                 }
                                                 className="flex-grow mr-2"
@@ -868,7 +981,7 @@ export const Tasks = (
                                                 variant="ghost"
                                                 size="icon"
                                                 onClick={() =>
-                                                  handleSaveClick(task)
+                                                  handleSaveTags(task)
                                                 }
                                               >
                                                 <CheckIcon className="h-4 w-4 text-green-500" />
@@ -876,261 +989,163 @@ export const Tasks = (
                                               <Button
                                                 variant="ghost"
                                                 size="icon"
-                                                onClick={handleCancelClick}
+                                                onClick={handleCancelTags}
                                               >
                                                 <XIcon className="h-4 w-4 text-red-500" />
                                               </Button>
                                             </div>
-                                          </>
-                                        ) : (
-                                          <>
-                                            <span>{task.description}</span>
-                                            <Button
-                                              variant="ghost"
-                                              size="icon"
-                                              onClick={() =>
-                                                handleEditClick(
-                                                  task.description
-                                                )
-                                              }
-                                            >
-                                              <PencilIcon className="h-4 w-4 text-gray-500" />
-                                            </Button>
-                                          </>
-                                        )}
-                                      </TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                      <TableCell>Due:</TableCell>
-                                      <TableCell>
-                                        {formattedDate(task.due)}
-                                      </TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                      <TableCell>Start:</TableCell>
-                                      <TableCell>
-                                        {formattedDate(task.start)}
-                                      </TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                      <TableCell>End:</TableCell>
-                                      <TableCell>
-                                        {formattedDate(task.end)}
-                                      </TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                      <TableCell>Wait:</TableCell>
-                                      <TableCell>
-                                        {formattedDate(task.wait)}
-                                      </TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                      <TableCell>Depends:</TableCell>
-                                      <TableCell>{task.depends}</TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                      <TableCell>Recur:</TableCell>
-                                      <TableCell>{task.recur}</TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                      <TableCell>RType:</TableCell>
-                                      <TableCell>{task.rtype}</TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                      <TableCell>Priority:</TableCell>
-                                      <TableCell>{task.priority}</TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                      <TableCell>Project:</TableCell>
-                                      <TableCell>{task.project}</TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                      <TableCell>Status:</TableCell>
-                                      <TableCell>{task.status}</TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                      <TableCell>Tags:</TableCell>
-                                      <TableCell>
-                                        {isEditingTags ? (
-                                          <div className="flex items-center">
-                                            <Input
-                                              type="text"
-                                              value={editedTags.join(', ')}
-                                              onChange={(e) =>
-                                                setEditedTags(
-                                                  e.target.value
-                                                    .split(',')
-                                                    .map((tag) => tag.trim())
-                                                )
-                                              }
-                                              className="flex-grow mr-2"
-                                            />
-                                            <Button
-                                              variant="ghost"
-                                              size="icon"
-                                              onClick={() =>
-                                                handleSaveTags(task)
-                                              }
-                                            >
-                                              <CheckIcon className="h-4 w-4 text-green-500" />
-                                            </Button>
-                                            <Button
-                                              variant="ghost"
-                                              size="icon"
-                                              onClick={handleCancelTags}
-                                            >
-                                              <XIcon className="h-4 w-4 text-red-500" />
-                                            </Button>
-                                          </div>
-                                        ) : (
-                                          <div className="flex items-center">
-                                            {task.tags !== null &&
-                                            task.tags.length >= 1 ? (
-                                              task.tags.map((tag, index) => (
-                                                <Badge
-                                                  key={index}
-                                                  variant="secondary"
-                                                  className="mr-2"
-                                                >
-                                                  <Tag className="pr-3" />
-                                                  {tag}
-                                                </Badge>
-                                              ))
-                                            ) : (
-                                              <span>No Tags</span>
-                                            )}
-                                            <Button
-                                              variant="ghost"
-                                              size="icon"
-                                              onClick={() =>
-                                                handleEditTagsClick(task)
-                                              }
-                                            >
-                                              <PencilIcon className="h-4 w-4 text-gray-500" />
-                                            </Button>
-                                          </div>
-                                        )}
-                                      </TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                      <TableCell>Urgency:</TableCell>
-                                      <TableCell>{task.urgency}</TableCell>
-                                    </TableRow>
-                                    <TableRow>
-                                      <TableCell>UUID:</TableCell>
-                                      <TableCell className="flex items-center">
-                                        <span>{task.uuid}</span>
-                                        <CopyToClipboard
-                                          text={task.uuid}
-                                          onCopy={() => handleCopy('Task UUID')}
-                                        >
-                                          <button className="bg-blue-500 hover:bg-gray-900 text-white font-bold py-2 px-2 rounded ml-2">
-                                            <CopyIcon />
-                                          </button>
-                                        </CopyToClipboard>
-                                      </TableCell>
-                                    </TableRow>
-                                  </TableBody>
-                                </Table>
-                              </DialogDescription>
-                            </div>
+                                          ) : (
+                                            <div className="flex items-center">
+                                              {task.tags !== null &&
+                                              task.tags.length >= 1 ? (
+                                                task.tags.map((tag, index) => (
+                                                  <Badge
+                                                    key={index}
+                                                    variant="secondary"
+                                                    className="mr-2"
+                                                  >
+                                                    <Tag className="pr-3" />
+                                                    {tag}
+                                                  </Badge>
+                                                ))
+                                              ) : (
+                                                <span>No Tags</span>
+                                              )}
+                                              <Button
+                                                variant="ghost"
+                                                size="icon"
+                                                onClick={() =>
+                                                  handleEditTagsClick(task)
+                                                }
+                                              >
+                                                <PencilIcon className="h-4 w-4 text-gray-500" />
+                                              </Button>
+                                            </div>
+                                          )}
+                                        </TableCell>
+                                      </TableRow>
+                                      <TableRow>
+                                        <TableCell>Urgency:</TableCell>
+                                        <TableCell>{task.urgency}</TableCell>
+                                      </TableRow>
+                                      <TableRow>
+                                        <TableCell>UUID:</TableCell>
+                                        <TableCell className="flex items-center">
+                                          <span>{task.uuid}</span>
+                                          <CopyToClipboard
+                                            text={task.uuid}
+                                            onCopy={() =>
+                                              handleCopy('Task UUID')
+                                            }
+                                          >
+                                            <button className="bg-blue-500 hover:bg-gray-900 text-white font-bold py-2 px-2 rounded ml-2">
+                                              <CopyIcon />
+                                            </button>
+                                          </CopyToClipboard>
+                                        </TableCell>
+                                      </TableRow>
+                                    </TableBody>
+                                  </Table>
+                                </DialogDescription>
+                              </div>
 
-                            {/* Non-scrollable footer */}
-                            <DialogFooter className="flex flex-row justify-end pt-4">
-                              {task.status == 'pending' ? (
-                                <Dialog>
-                                  <DialogTrigger asChild className="mr-5">
-                                    <Button>Mark As Completed</Button>
-                                  </DialogTrigger>
-                                  <DialogContent>
-                                    <DialogTitle>
-                                      <span className="ml-0 mb-0 mr-0 text-2xl mt-0 md:text-2xl font-bold">
-                                        <span className="inline bg-gradient-to-r from-[#F596D3]  to-[#D247BF] text-transparent bg-clip-text">
-                                          Are you{' '}
+                              {/* Non-scrollable footer */}
+                              <DialogFooter className="flex flex-row justify-end pt-4">
+                                {task.status == 'pending' ? (
+                                  <Dialog>
+                                    <DialogTrigger asChild className="mr-5">
+                                      <Button>Mark As Completed</Button>
+                                    </DialogTrigger>
+                                    <DialogContent>
+                                      <DialogTitle>
+                                        <span className="ml-0 mb-0 mr-0 text-2xl mt-0 md:text-2xl font-bold">
+                                          <span className="inline bg-gradient-to-r from-[#F596D3]  to-[#D247BF] text-transparent bg-clip-text">
+                                            Are you{' '}
+                                          </span>
+                                          sure?
                                         </span>
-                                        sure?
-                                      </span>
-                                    </DialogTitle>
-                                    <DialogFooter className="flex flex-row justify-center">
-                                      <DialogClose asChild>
-                                        <Button
-                                          className="mr-5"
-                                          onClick={() =>
-                                            markTaskAsCompleted(
-                                              props.email,
-                                              props.encryptionSecret,
-                                              props.UUID,
-                                              task.uuid
-                                            )
-                                          }
-                                        >
-                                          Yes
-                                        </Button>
-                                      </DialogClose>
-                                      <DialogClose asChild>
-                                        <Button variant={'destructive'}>
-                                          No
-                                        </Button>
-                                      </DialogClose>
-                                    </DialogFooter>
-                                  </DialogContent>
-                                </Dialog>
-                              ) : null}
+                                      </DialogTitle>
+                                      <DialogFooter className="flex flex-row justify-center">
+                                        <DialogClose asChild>
+                                          <Button
+                                            className="mr-5"
+                                            onClick={() =>
+                                              markTaskAsCompleted(
+                                                props.email,
+                                                props.encryptionSecret,
+                                                props.UUID,
+                                                task.uuid
+                                              )
+                                            }
+                                          >
+                                            Yes
+                                          </Button>
+                                        </DialogClose>
+                                        <DialogClose asChild>
+                                          <Button variant={'destructive'}>
+                                            No
+                                          </Button>
+                                        </DialogClose>
+                                      </DialogFooter>
+                                    </DialogContent>
+                                  </Dialog>
+                                ) : null}
 
-                              {task.status != 'deleted' ? (
-                                <Dialog>
-                                  <DialogTrigger asChild>
-                                    <Button
-                                      className="mr-4"
-                                      variant={'destructive'}
-                                    >
-                                      <Trash2Icon />
-                                    </Button>
-                                  </DialogTrigger>
-                                  <DialogContent>
-                                    <DialogTitle>
-                                      <span className="ml-0 mb-0 mr-0 text-2xl mt-0 md:text-2xl font-bold">
-                                        <span className="inline bg-gradient-to-r from-[#F596D3]  to-[#D247BF] text-transparent bg-clip-text">
-                                          Are you{' '}
+                                {task.status != 'deleted' ? (
+                                  <Dialog>
+                                    <DialogTrigger asChild>
+                                      <Button
+                                        className="mr-4"
+                                        variant={'destructive'}
+                                      >
+                                        <Trash2Icon />
+                                      </Button>
+                                    </DialogTrigger>
+                                    <DialogContent>
+                                      <DialogTitle>
+                                        <span className="ml-0 mb-0 mr-0 text-2xl mt-0 md:text-2xl font-bold">
+                                          <span className="inline bg-gradient-to-r from-[#F596D3]  to-[#D247BF] text-transparent bg-clip-text">
+                                            Are you{' '}
+                                          </span>
+                                          sure?
                                         </span>
-                                        sure?
-                                      </span>
-                                    </DialogTitle>
-                                    <DialogFooter className="flex flex-row justify-center">
-                                      <DialogClose asChild>
-                                        <Button
-                                          className="mr-5"
-                                          onClick={() =>
-                                            markTaskAsDeleted(
-                                              props.email,
-                                              props.encryptionSecret,
-                                              props.UUID,
-                                              task.uuid
-                                            )
-                                          }
-                                        >
-                                          Yes
-                                        </Button>
-                                      </DialogClose>
-                                      <DialogClose asChild>
-                                        <Button variant={'destructive'}>
-                                          No
-                                        </Button>
-                                      </DialogClose>
-                                    </DialogFooter>
-                                  </DialogContent>
-                                </Dialog>
-                              ) : null}
-                              <DialogClose asChild>
-                                <Button className="bg-white">Close</Button>
-                              </DialogClose>
-                            </DialogFooter>
-                          </DialogContent>
-                        </Dialog>
-                      ))}
+                                      </DialogTitle>
+                                      <DialogFooter className="flex flex-row justify-center">
+                                        <DialogClose asChild>
+                                          <Button
+                                            className="mr-5"
+                                            onClick={() =>
+                                              markTaskAsDeleted(
+                                                props.email,
+                                                props.encryptionSecret,
+                                                props.UUID,
+                                                task.uuid
+                                              )
+                                            }
+                                          >
+                                            Yes
+                                          </Button>
+                                        </DialogClose>
+                                        <DialogClose asChild>
+                                          <Button variant={'destructive'}>
+                                            No
+                                          </Button>
+                                        </DialogClose>
+                                      </DialogFooter>
+                                    </DialogContent>
+                                  </Dialog>
+                                ) : null}
+                                <DialogClose asChild>
+                                  <Button className="bg-white">Close</Button>
+                                </DialogClose>
+                              </DialogFooter>
+                            </DialogContent>
+                          </Dialog>
+                        ))
+                      )}
 
                       {/* Display empty rows */}
-                      {emptyRows > 0 && (
+                      {!props.isLoading && emptyRows > 0 && (
                         <TableRow style={{ height: 52 * emptyRows }}>
                           <TableCell colSpan={6} />
                         </TableRow>