Add feedback in codesandbox button

Author: baptadn

src/components/Header.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react'
+import React, { memo, useState } from 'react'
 import {
   Box,
   Switch,
@@ -18,23 +18,25 @@ import useDispatch from '../hooks/useDispatch'
 import { useSelector } from 'react-redux'
 import { getComponents } from '../core/selectors/components'
 import { getShowLayout, getShowCode } from '../core/selectors/app'
-// import { createShareUrl } from '../utils/share'
-// import useClipboard from '../hooks/useClipboard'
 
 const CodeSandboxButton = () => {
   const components = useSelector(getComponents)
+  const [isLoading, setIsLoading] = useState(false)
 
   return (
     <Button
       onClick={async () => {
+        setIsLoading(true)
         const code = await generateCode(components)
+        setIsLoading(false)
         const parameters = buildParameters(code)
 
         window.open(
           `https://codesandbox.io/api/v1/sandboxes/define?parameters=${parameters}`,
           '_blank',
         )
       }}
+      isLoading={isLoading}
       rightIcon="external-link"
       variant="ghost"
       size="xs"
@@ -44,26 +46,6 @@ const CodeSandboxButton = () => {
   )
 }
 
-/*
-const ShareButton = () => {
-  const components = useSelector(getComponents)
-
-  const { onCopy, hasCopied } = useClipboard()
-
-  const copy = () => {
-    if (onCopy) {
-      onCopy(createShareUrl(components))
-    }
-  }
-
-  return (
-    <Button onClick={copy} rightIcon="external-link" variant="ghost" size="xs">
-      {hasCopied ? 'Copied' : 'Share'}
-    </Button>
-  )
-}
-*/
-
 const Header = () => {
   const showLayout = useSelector(getShowLayout)
   const showCode = useSelector(getShowCode)

src/components/inspector/panels/components/IconButtonPanel.tsx

@@ -28,10 +28,10 @@ const IconButtonPanel = () => {
           name="icon"
         >
           {Object.keys(theme.icons)
-            .filter(icon => icon.includes(icon) || !icon)
-            .map((icon, index) => (
-              <ComboboxOption key={index} value={icon}>
-                <Icon name={icon as Icons} /> <ComboboxOptionText />
+            .filter(item => item.includes(icon) || !icon)
+            .map((item, index) => (
+              <ComboboxOption key={index} value={item}>
+                <Icon name={item as Icons} /> <ComboboxOptionText />
               </ComboboxOption>
             ))}
         </InputSuggestion>

src/utils/defaultProps.tsx

@@ -170,7 +170,7 @@ export const DEFAULT_PROPS: PreviewDefaultProps = {
     variant: 'subtle',
   },
   Box: Box.defaultProps,
-  Button: { ...Button.defaultProps, children: 'Lorem Ipsum' },
+  Button: { ...Button.defaultProps, children: 'Lorem Ipsum', variant: 'solid' },
   Divider: { borderColor: 'blackAlpha.500' },
   IconButton: {
     ...IconButton.defaultProps,
@@ -183,7 +183,6 @@ export const DEFAULT_PROPS: PreviewDefaultProps = {
     ...Image.defaultProps,
     height: '100px',
     width: '100px',
-    fallbackSrc: 'https://via.placeholder.com/150',
   },
   Text: { ...Text.defaultProps, children: 'Lorem Ipsum' },
   Progress: { ...Progress.defaultProps, size: 'md' },