Install plugins from Yaak plugin registry (#230)

src-web/components/core/Icon.tsx

@@ -33,6 +33,7 @@ const icons = {
   chevron_down: lucide.ChevronDownIcon,
   chevron_right: lucide.ChevronRightIcon,
   circle_alert: lucide.CircleAlertIcon,
+  circle_fading_arrow_up: lucide.CircleFadingArrowUpIcon,
   clock: lucide.ClockIcon,
   code: lucide.CodeIcon,
   columns_2: lucide.Columns2Icon,
@@ -133,7 +134,7 @@ export const Icon = memo(function Icon({
       title={title}
       className={classNames(
         className,
-        'flex-shrink-0 transform-cpu',
+        'flex-shrink-0',
         size === 'xl' && 'h-6 w-6',
         size === 'lg' && 'h-5 w-5',
         size === 'md' && 'h-4 w-4',

src-web/components/core/IconButton.tsx

@@ -6,6 +6,7 @@ import type { ButtonProps } from './Button';
 import { Button } from './Button';
 import type { IconProps } from './Icon';
 import { Icon } from './Icon';
+import { LoadingIcon } from './LoadingIcon';
 
 export type IconButtonProps = IconProps &
   ButtonProps & {
@@ -31,6 +32,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(functio
     iconSize,
     showBadge,
     iconColor,
+    isLoading,
     ...props
   }: IconButtonProps,
   ref,
@@ -70,18 +72,22 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(functio
           <div className="w-2.5 h-2.5 bg-pink-500 rounded-full" />
         </div>
       )}
-      <Icon
-        size={iconSize}
-        icon={confirmed ? 'check' : icon}
-        spin={spin}
-        color={iconColor}
-        className={classNames(
-          iconClassName,
-          'group-hover/button:text-text',
-          confirmed && '!text-success', // Don't use Icon.color here because it won't override the hover color
-          props.disabled && 'opacity-70',
-        )}
-      />
+      {isLoading ? (
+        <LoadingIcon size={iconSize} className={iconClassName} />
+      ) : (
+        <Icon
+          size={iconSize}
+          icon={confirmed ? 'check' : icon}
+          spin={spin}
+          color={iconColor}
+          className={classNames(
+            iconClassName,
+            'group-hover/button:text-text',
+            confirmed && '!text-success', // Don't use Icon.color here because it won't override the hover color
+            props.disabled && 'opacity-70',
+          )}
+        />
+      )}
     </Button>
   );
 });

src-web/components/core/Table.tsx

@@ -53,7 +53,7 @@ export function TableHeaderCell({
   children,
   className,
 }: {
-  children: ReactNode;
+  children?: ReactNode;
   className?: string;
 }) {
   return (