Integrated update experience (#259)

src-web/components/core/ButtonInfiniteLoading.tsx

@@ -0,0 +1,25 @@
+import { useState } from 'react';
+import type { ButtonProps } from './Button';
+import { Button } from './Button';
+
+export function ButtonInfiniteLoading({
+  onClick,
+  isLoading,
+  loadingChildren,
+  children,
+  ...props
+}: ButtonProps & { loadingChildren?: string }) {
+  const [localIsLoading, setLocalIsLoading] = useState<boolean>(false);
+  return (
+    <Button
+      isLoading={localIsLoading || isLoading}
+      onClick={(e) => {
+        setLocalIsLoading(true);
+        onClick?.(e);
+      }}
+      {...props}
+    >
+      {localIsLoading ? (loadingChildren ?? children) : children}
+    </Button>
+  );
+}

src-web/components/core/Checkbox.tsx

@@ -40,7 +40,7 @@ export function Checkbox({
           className={classNames(
             'appearance-none w-4 h-4 flex-shrink-0 border border-border',
             'rounded outline-none ring-0',
-            !disabled && 'hocus:border-border-focus hocus:bg-focus/[5%] ',
+            !disabled && 'hocus:border-border-focus hocus:bg-focus/[5%]',
             disabled && 'border-dotted',
           )}
           type="checkbox"
@@ -58,7 +58,7 @@ export function Checkbox({
         </div>
       </div>
       {!hideLabel && (
-        <div className={classNames(fullWidth && 'w-full', disabled && 'opacity-disabled')}>
+        <div className={classNames('text-sm', fullWidth && 'w-full', disabled && 'opacity-disabled')}>
           {title}
         </div>
       )}

src-web/components/core/Toast.tsx

@@ -16,7 +16,7 @@ export interface ToastProps {
   className?: string;
   timeout: number | null;
   action?: (args: { hide: () => void }) => ReactNode;
-  icon?: ShowToastRequest['icon'];
+  icon?: ShowToastRequest['icon'] | null;
   color?: ShowToastRequest['color'];
 }
 
@@ -42,7 +42,7 @@ export function Toast({ children, open, onClose, timeout, action, icon, color }:
     [open],
   );
 
-  const toastIcon = icon ?? (color && color in ICONS && ICONS[color]);
+  const toastIcon = icon === null ? null : icon ?? (color && color in ICONS && ICONS[color]);
 
   return (
     <m.div