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/layout/dashboard-shell.tsx

@@ -24,6 +24,7 @@ import {
   SidebarUserProfile,
 } from "poyraz-ui/organisms";
 import { sidebarData } from "@/config/sidebar";
+import { PendingLink } from "@/components/ui/pending-link";
 import { cn } from "@/lib/utils";
 import { ChevronUp, LogOut, Menu, Settings } from "lucide-react";
 import Image from "next/image";
@@ -158,13 +159,14 @@ function AppSidebar({
                       icon={Icon ? <Icon className="h-4 w-4" /> : undefined}
                       className={cn(isActive && "font-semibold")}
                     >
-                      <Link
+                      <PendingLink
                         href={item.href || "#"}
                         onClick={onNavigate}
-                        className="block w-full"
+                        className="flex w-full items-center justify-between gap-2"
+                        showSpinner
                       >
                         {item.title}
-                      </Link>
+                      </PendingLink>
                     </SidebarMenuItem>
                   );
                 })}
@@ -214,10 +216,10 @@ function AppSidebar({
             </DropdownMenuLabel>
             <DropdownMenuSeparator />
             <DropdownMenuItem asChild>
-              <Link href="/settings" onClick={onNavigate} className="gap-2">
+              <PendingLink href="/settings" onClick={onNavigate} className="gap-2" showSpinner>
                 <Settings className="h-4 w-4" />
                 Ayarlar
-              </Link>
+              </PendingLink>
             </DropdownMenuItem>
             <DropdownMenuSeparator />
             <form action={signOut}>

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>
+  );
+}

components/ui/pending-submit-button.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { Loader2 } from "lucide-react";
+import { Button } from "poyraz-ui/atoms";
+import type { ComponentProps, ReactNode } from "react";
+import { useFormStatus } from "react-dom";
+
+import { cn } from "@/lib/utils";
+
+type PendingSubmitButtonProps = ComponentProps<typeof Button> & {
+  idleIcon?: ReactNode;
+  pendingIcon?: ReactNode;
+  pendingChildren?: ReactNode;
+};
+
+export function PendingSubmitButton({
+  children,
+  className,
+  disabled,
+  idleIcon,
+  pendingChildren,
+  pendingIcon,
+  type = "submit",
+  ...props
+}: PendingSubmitButtonProps) {
+  const { pending } = useFormStatus();
+  const icon = pending
+    ? pendingIcon ?? <Loader2 className="h-4 w-4 animate-spin" />
+    : idleIcon;
+
+  return (
+    <Button
+      {...props}
+      type={type}
+      disabled={disabled || pending}
+      aria-busy={pending}
+      className={cn(className)}
+    >
+      {icon}
+      {pending ? pendingChildren ?? children : children}
+    </Button>
+  );
+}