feat: migrate to standard loading component

components/auto-complete/auto-complete.tsx

@@ -6,7 +6,7 @@ import AutoCompleteSearching from './auto-complete-searching'
 import AutoCompleteEmpty from './auto-complete-empty'
 import { AutoCompleteContext, AutoCompleteConfig } from './auto-complete-context'
 import { NormalSizes, NormalTypes } from '../utils/prop-types'
-import ButtonLoading from '../button/button.loading'
+import Loading from '../loading'
 import { pickChild } from 'components/utils/collections'
 
 export type AutoCompleteOption = {
@@ -62,7 +62,7 @@ const childrenToOptionsNode = (options: AutoCompleteOptions) => {
 // When the search is seted, at least one element should exist to avoid re-render.
 const getSearchIcon = (searching?: boolean) => {
   if (searching === undefined) return null
-  return searching ? <ButtonLoading bgColor="transparent" /> : <span />
+  return searching ? <Loading size="medium" /> : <span />
 }
 
 const AutoComplete: React.FC<React.PropsWithChildren<AutoCompleteProps>> = ({
@@ -146,6 +146,12 @@ const AutoComplete: React.FC<React.PropsWithChildren<AutoCompleteProps>> = ({
           .auto-complete {
             width: ${width || 'max-content'};
           }
+          
+          .auto-complete :global(.loading) {
+            left: -3px;
+            right: -3px;
+            width: max-content;
+          }
         `}</style>
       </div>
     </AutoCompleteContext.Provider>

components/button-dropdown/button-dropdown-item.tsx

@@ -4,7 +4,7 @@ import withDefaults from '../utils/with-defaults'
 import { getColor } from './styles'
 import { useButtonDropdown } from './button-dropdown-context'
 import { getButtonSize } from '../button/styles'
-import ButtonLoading from '../button/button.loading'
+import Loading from '../loading'
 import { NormalTypes } from '../utils/prop-types'
 
 interface Props {
@@ -43,7 +43,7 @@ const ButtonDropdownItem: React.FC<React.PropsWithChildren<ButtonDropdownItemPro
   
   return (
     <button className={className} onClick={clickHandler} {...props}>
-      {loading ? <ButtonLoading /> : children}
+      {loading ? <Loading /> : children}
       <style jsx>{`
         button {
           position: relative;

components/button/button.loading.tsx

@@ -1,69 +0,0 @@
-import React from 'react'
-import useTheme from '../styles/use-theme'
-
-interface Props {
-  bgColor?: string
-}
-
-const ButtonLoading: React.FC<Props> = React.memo(({
-  bgColor,
-}) => {
-  const theme = useTheme()
-  return (
-    <span className="loading">
-      <i />
-      <i />
-      <i />
-      
-      <style jsx>{`
-        .loading {
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          width: 100%;
-          height: 100%;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          background-color: ${bgColor || theme.palette.accents_1};
-        }
-
-        i {
-          width: 4px;
-          height: 4px;
-          border-radius: 50%;
-          background-color: ${theme.palette.accents_6};
-          margin: 0 1px;
-          display: inline-block;
-          animation: loading-blink 1.4s infinite both;
-        }
-        
-        i:nth-child(2) {
-          animation-delay: 0.2s;
-        }
-        
-        i:nth-child(3) {
-          animation-delay: 0.4s;
-        }
-        
-        @keyframes loading-blink {
-          0% {
-            opacity: 0.2;
-          }
-          
-          20% {
-            opacity: 1;
-          }
-          
-          100% {
-            opacity: 0.2;
-          }
-        }
-      `}</style>
-    </span>
-  )
-})
-
-export default ButtonLoading

components/button/button.tsx

@@ -3,7 +3,7 @@ import withDefaults from '../utils/with-defaults'
 import useTheme from '../styles/use-theme'
 import { ButtonTypes, NormalSizes } from '../utils/prop-types'
 import ButtonDrip from './button.drip'
-import ButtonLoading from './button.loading'
+import ButtonLoading from '../loading'
 import { getButtonColors, getButtonCursor, getButtonHoverColors, getButtonSize } from './styles'
 
 interface Props {

components/input/input-icon.tsx

@@ -18,10 +18,10 @@ const InputIcon: React.FC<InputIconProps> = React.memo(({
   }, [theme.layout.gap, ratio])
 
   return (
-    <span>
+    <span className="input-icon">
       {icon}
       <style jsx>{`
-        span {
+        .input-icon {
           box-sizing: content-box;
           display: flex;
           width: ${width};

pages/docs/components/spinner.mdx

@@ -1,5 +1,6 @@
 import { Layout, Playground, Attributes } from 'lib/components'
-import { Spinner, Spacer } from 'components'
+import { Spinner, Spacer, Note, Code, Link } from 'components'
+import NextLink from 'next/link'
 
 export const meta = {
   title: 'Spinner',
@@ -10,6 +11,8 @@ export const meta = {
 
 Indicate an action running in the background.
 
+<Note>Looking for <Code>Loading</Code>? Use the <NextLink href="/docs/components/loading"><a>Loading Component</a></NextLink>.</Note>
+
 <Playground
   scope={{ Spinner }}
   code={`