Merge pull request #109 from Kinfe123/comp-fix

fix: loading state happens on both of button when either of the btn p…

src/app/(dashboard)/dashboard/stores/[storeId]/page.tsx

@@ -186,13 +186,14 @@ export default async function UpdateStorePage({
               />
             </div>
             <div className="flex flex-col gap-2 xs:flex-row">
-              <LoadingButton>
+              <LoadingButton action='update'>
                 Update store
                 <span className="sr-only">Update store</span>
               </LoadingButton>
               <LoadingButton
                 formAction={deleteStore.bind(null, storeId)}
                 variant="destructive"
+                action='delete'
               >
                 Delete store
                 <span className="sr-only">Delete store</span>

src/components/file-dialog.tsx

@@ -252,7 +252,7 @@ function FileCard({ i, file, files, setFiles }: FileCardProps) {
   }, [onCrop])
 
   return (
-    <div className="relative flex items-center justify-between gap-2.5">
+    <div className="relative flex items-center justify-between gap-10">
       <div className="flex items-center gap-2">
         <Image
           src={cropData ? cropData : file.preview}
@@ -264,7 +264,7 @@ function FileCard({ i, file, files, setFiles }: FileCardProps) {
         />
         <div className="flex flex-col">
           <p className="line-clamp-1 text-sm font-medium text-muted-foreground">
-            {file.name}
+            {file.name.slice(0 , 45)}
           </p>
           <p className="text-xs text-slate-500">
             {(file.size / 1024 / 1024).toFixed(2)}MB
@@ -352,7 +352,7 @@ function FileCard({ i, file, files, setFiles }: FileCardProps) {
             setFiles(files.filter((_, j) => j !== i))
           }}
         >
-          <Cross2Icon className="h-4 w-4" aria-hidden="true" />
+          <Cross2Icon className="h-4 w-4 " aria-hidden="true" />
           <span className="sr-only">Remove file</span>
         </Button>
       </div>

src/components/loading-button.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import * as React from "react"
+import { useState } from "react"
 import { useFormStatus } from "react-dom"
 
 import { cn } from "@/lib/utils"
@@ -13,9 +14,15 @@ import {
 import { Skeleton } from "@/components/ui/skeleton"
 import { Icons } from "@/components/icons"
 
-const LoadingButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ children, className, variant, size, ...props }, ref) => {
+type ButtonActionProps = ButtonProps & {
+  action: string
+}
+
+const LoadingButton = React.forwardRef<HTMLButtonElement, ButtonActionProps>(
+  ({ children, className, variant, size, action, ...props }, ref) => {
     const { pending } = useFormStatus()
+    const [del, setDel] = useState(false)
+    const [update, setUpdate] = useState(false)
     const mounted = useMounted()
 
     if (!mounted)
@@ -36,8 +43,21 @@ const LoadingButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
         ref={ref}
         disabled={pending}
         {...props}
+        onClick={() => {
+          if (action === "update") {
+            setUpdate(true)
+          } else {
+            setDel(true)
+          }
+        }}
       >
-        {pending && (
+        {del && pending && (
+          <Icons.spinner
+            className="mr-2 h-4 w-4 animate-spin"
+            aria-hidden="true"
+          />
+        )}
+        {update && pending && (
           <Icons.spinner
             className="mr-2 h-4 w-4 animate-spin"
             aria-hidden="true"