feat: implement pending link and submit button components for improved UX

- Added PendingLink component to provide loading feedback on navigation links.
- Introduced PendingSubmitButton component for forms to indicate submission status.
- Updated dashboard, projects, tasks, and clients pages to utilize new components for better user experience during navigation and form submissions.
- Enhanced task and project actions with optimistic updates and loading states.
- Improved overall performance and user feedback during data fetching and action processing.

components/ui/pending-link.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { Loader2 } from "lucide-react";
+import Link, { type LinkProps } from "next/link";
+import { usePathname } from "next/navigation";
+import {
+  useEffect,
+  useState,
+  type AnchorHTMLAttributes,
+  type MouseEvent,
+  type ReactNode,
+} from "react";
+
+import { cn } from "@/lib/utils";
+
+type PendingLinkProps = LinkProps &
+  Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof LinkProps | "href"> & {
+    children: ReactNode;
+    pendingClassName?: string;
+    showSpinner?: boolean;
+    spinnerClassName?: string;
+  };
+
+export function PendingLink({
+  children,
+  className,
+  href,
+  onClick,
+  pendingClassName = "opacity-70",
+  showSpinner = false,
+  spinnerClassName,
+  target,
+  ...props
+}: PendingLinkProps) {
+  const pathname = usePathname();
+  const [pending, setPending] = useState(false);
+
+  useEffect(() => {
+    setPending(false);
+  }, [pathname]);
+
+  function handleClick(event: MouseEvent<HTMLAnchorElement>) {
+    onClick?.(event);
+
+    if (
+      event.defaultPrevented ||
+      target === "_blank" ||
+      event.metaKey ||
+      event.ctrlKey ||
+      event.shiftKey ||
+      event.altKey ||
+      event.button !== 0
+    ) {
+      return;
+    }
+
+    const hrefValue = typeof href === "string" ? href : href.pathname?.toString() ?? "";
+    const nextPath = hrefValue.split("?")[0].split("#")[0];
+
+    if (nextPath && nextPath !== pathname) {
+      setPending(true);
+    }
+  }
+
+  return (
+    <Link
+      {...props}
+      href={href}
+      target={target}
+      onClick={handleClick}
+      aria-busy={pending}
+      data-pending={pending ? "" : undefined}
+      className={cn(className, pending && pendingClassName)}
+    >
+      {children}
+      {pending && showSpinner ? (
+        <Loader2 className={cn("h-3.5 w-3.5 shrink-0 animate-spin", spinnerClassName)} />
+      ) : null}
+    </Link>
+  );
+}