improve profile page

apps/dashboard/src/components/pagination.tsx

@@ -29,6 +29,7 @@ export function Pagination({
   setCursor,
   className,
   size = 'base',
+  loading,
 }: {
   take: number;
   count: number;
@@ -36,6 +37,7 @@ export function Pagination({
   setCursor: Dispatch<SetStateAction<number>>;
   className?: string;
   size?: 'sm' | 'base';
+  loading?: boolean;
 }) {
   const lastCursor = Math.floor(count / take) - 1;
   const isNextDisabled = count === 0 || lastCursor === cursor;
@@ -56,42 +58,43 @@ export function Pagination({
       )}
       {size === 'base' && (
         <Button
+          loading={loading}
           variant="outline"
           size="icon"
           onClick={() => setCursor(0)}
           disabled={cursor === 0}
           className="max-sm:hidden"
-        >
-          <ChevronsLeftIcon size={14} />
-        </Button>
+          icon={ChevronsLeftIcon}
+        />
       )}
       <Button
+        loading={loading}
         variant="outline"
         size="icon"
         onClick={() => setCursor((p) => Math.max(0, p - 1))}
         disabled={cursor === 0}
-      >
-        <ChevronLeftIcon size={14} />
-      </Button>
+        icon={ChevronLeftIcon}
+      />
 
       <Button
+        loading={loading}
         variant="outline"
         size="icon"
         onClick={() => setCursor((p) => Math.min(lastCursor, p + 1))}
         disabled={isNextDisabled}
-      >
-        <ChevronRightIcon size={14} />
-      </Button>
+        icon={ChevronRightIcon}
+      />
+
       {size === 'base' && (
         <Button
+          loading={loading}
           variant="outline"
           size="icon"
           onClick={() => setCursor(lastCursor)}
           disabled={isNextDisabled}
           className="max-sm:hidden"
-        >
-          <ChevronsRightIcon size={14} />
-        </Button>
+          icon={ChevronsRightIcon}
+        />
       )}
     </div>
   );

apps/dashboard/src/components/ui/button.tsx

@@ -76,9 +76,10 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {Icon && (
           <Icon
             className={cn(
-              'mr-2 h-4 w-4 flex-shrink-0',
-              responsive && 'mr-0 sm:mr-2',
-              loading && 'animate-spin'
+              'h-4 w-4 flex-shrink-0',
+              loading && 'animate-spin',
+              size !== 'icon' && responsive && 'mr-0 sm:mr-2',
+              size !== 'icon' && 'mr-2'
             )}
           />
         )}