Merge pull request #331 from riccardoperra/330-loading-indicator-when…

…-exporting-as-image

fix(app): add loading indicator when exporting as image

.changeset/famous-adults-attend.md

@@ -0,0 +1,5 @@
+---
+'@codeimage/ui': minor
+---
+
+feat(ui): add LoadingCircle spinner icon and Button support for loading state and left icon

.changeset/mean-baboons-rule.md

@@ -0,0 +1,5 @@
+---
+'@codeimage/app': patch
+---
+
+fix(app): #330 loading indicator when exporting as image

apps/codeimage/src/components/Toolbar/ExportButton.tsx

@@ -86,13 +86,10 @@ export const ExportButton: Component<ExportButtonProps> = props => {
         ref={openButtonRef}
         variant={'solid'}
         theme={'primary'}
-        disabled={data.loading}
+        loading={data.loading}
+        leftIcon={() => <DownloadIcon />}
       >
-        <DownloadIcon />
-
-        <Box as={'span'} marginLeft={2}>
-          {label()}
-        </Box>
+        {label()}
       </Button>
 
       <Show when={overlayState.isOpen()}>

apps/codeimage/src/components/Toolbar/ExportNewTabButton.tsx

@@ -1,5 +1,5 @@
 import {useI18n} from '@codeimage/locale';
-import {Box, Button, useSnackbarStore} from '@codeimage/ui';
+import {Button, useSnackbarStore} from '@codeimage/ui';
 import {Component, createEffect} from 'solid-js';
 import {
   ExportExtension,
@@ -60,14 +60,11 @@ export const ExportInNewTabButton: Component<ExportButtonProps> = props => {
     <Button
       variant={'solid'}
       theme={'primaryAlt'}
-      disabled={data.loading}
+      loading={data.loading}
+      leftIcon={() => <ExternalLinkIcon />}
       onClick={() => openInTab()}
     >
-      <ExternalLinkIcon />
-
-      <Box as={'span'} marginLeft={2}>
-        {label()}
-      </Box>
+      {label()}
     </Button>
   );
 };

packages/ui/src/lib/primitives/Button/Button.css.ts

@@ -26,7 +26,7 @@ export const button = style([
 
     ':disabled': {
       cursor: 'default',
-      opacity: 0.3,
+      opacity: 0.5,
     },
 
     ':focus': {
@@ -35,6 +35,10 @@ export const button = style([
   },
 ]);
 
+export const buttonIcon = style({
+  marginRight: themeVars.spacing['2'],
+});
+
 export const buttonVariant = recipe({
   base: [button],
   variants: {
@@ -49,6 +53,12 @@ export const buttonVariant = recipe({
         borderRadius: themeVars.borderRadius.full,
       },
     },
+    loading: {
+      true: {
+        opacity: 0.7,
+        pointerEvents: 'none',
+      },
+    },
     // Button type
     variant: {
       solid: {

packages/ui/src/lib/primitives/Button/Button.tsx

@@ -1,26 +1,57 @@
-import * as styles from './Button.css';
+import {elements} from '@solid-primitives/refs';
+import clsx from 'clsx';
 import {Button as ShButton} from 'solid-headless';
 import {ButtonProps as ShButtonProps} from 'solid-headless/dist/types/components/Button';
 import {ValidConstructor} from 'solid-headless/dist/types/utils/dynamic-prop';
-import {JSXElement} from 'solid-js';
+import {children, JSXElement, ParentProps, Show} from 'solid-js';
+import {omitProps} from 'solid-use';
+import {CustomComponentProps} from '../../utils';
+import {LoadingCircle} from '../Loader';
+import * as styles from './Button.css';
 
-type ButtonProps<T extends ValidConstructor = 'button'> = ShButtonProps<T> &
-  styles.ButtonVariants;
+type ButtonProps<T extends ValidConstructor = 'button'> = CustomComponentProps<
+  T,
+  {
+    leftIcon?: JSXElement;
+    loading?: boolean;
+  } & ShButtonProps<T> &
+    styles.ButtonVariants
+>;
 
 export function Button<T extends ValidConstructor = 'button'>(
-  props: ButtonProps<T>,
+  props: ParentProps<ButtonProps<T>>,
 ): JSXElement {
-  return (
-    <ShButton
-      {...props}
-      class={`${styles.buttonVariant({
+  const classes = () =>
+    clsx(
+      styles.buttonVariant({
         pill: props.pill,
         block: props.block,
         theme: props.theme,
         variant: props.variant,
         size: props.size || 'sm',
-      })} ${props.class || ''}`}
+        loading: props.loading,
+      }),
+      props.class,
+    );
+
+  const resolvedIcon = (): JSXElement => {
+    if (!props.leftIcon) return null;
+    const item = children(() => props.leftIcon);
+    const els = elements(item, SVGElement, HTMLElement);
+    // Should always be 1
+    els().forEach(el => el.classList.add(styles.buttonIcon));
+    return els();
+  };
+
+  return (
+    <ShButton
+      {...omitProps(props, ['class', 'leftIcon', 'loading'])}
+      class={classes()}
     >
+      <Show when={!!props.leftIcon && !props.loading}>{resolvedIcon()}</Show>
+      <Show when={props.loading}>
+        <LoadingCircle class={styles.buttonIcon} size={props.size ?? 'sm'} />
+      </Show>
       {props.children}
     </ShButton>
   );

packages/ui/src/lib/primitives/Icon/SvgIcon.tsx

@@ -7,13 +7,14 @@ export type SvgIconProps = _SvgIconProps &
 
 export function SvgIcon(props: SvgIconProps): JSX.Element {
   const computedProps = mergeProps({size: 'md'} as _SvgIconProps, props);
+  const classes = () => clsx(svgIcon({size: computedProps.size}), props.class);
 
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
       {...props}
-      class={clsx(props.class, svgIcon({size: computedProps.size}))}
+      class={classes()}
     >
       {props.children}
     </svg>

packages/ui/src/lib/primitives/Loader/LoadingCircle.css.ts

@@ -0,0 +1,19 @@
+import {keyframes, style} from '@vanilla-extract/css';
+
+export const spinner = keyframes({
+  to: {
+    transform: 'rotate(1turn)',
+  },
+});
+
+export const loadingIcon = style({
+  animation: `${spinner} 1s linear infinite`,
+});
+
+export const circle = style({
+  opacity: '.25',
+});
+
+export const ring = style({
+  opacity: '.75',
+});

packages/ui/src/lib/primitives/Loader/LoadingCircle.tsx

@@ -0,0 +1,29 @@
+import clsx from 'clsx';
+import {SvgIcon, SvgIconProps} from '../Icon';
+import * as styles from './LoadingCircle.css';
+
+function LoadingCircleIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon fill="none" viewBox="0 0 24 24" {...props}>
+      <circle
+        class={styles.circle}
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="4"
+      ></circle>
+      <path
+        class={styles.ring}
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      ></path>
+    </SvgIcon>
+  );
+}
+
+export function LoadingCircle(props: SvgIconProps) {
+  const classes = () => clsx(props.class, styles.loadingIcon);
+
+  return <LoadingCircleIcon {...props} class={classes()} />;
+}

packages/ui/src/lib/primitives/Loader/index.ts

@@ -1,2 +1,3 @@
 export * from './Loading';
+export * from './LoadingCircle';
 export * from './LoadingOverlay';