fix: Loading component had no styling

src/components/Loading/Loading.tsx

@@ -1,33 +1,28 @@
 import React from 'react'
+import styleHandler from '../../lib/theme/styleHandler'
 import { IconLoader } from './../../index'
-// @ts-ignore
-// import LoadingStyles from './Loading.module.css'
 
 interface Props {
   children: React.ReactNode
   active: boolean
 }
 export default function Loading({ children, active }: Props) {
-  // let classNames = [LoadingStyles['sbui-loading']]
-  // if (active) {
-  //   classNames.push(LoadingStyles['sbui-loading--active'])
-  // }
+  const __styles = styleHandler('loading')
+
+  let classNames = [__styles.base]
+
+  let contentClasses = [__styles.content.base]
+
+  if (active) {
+    contentClasses.push(__styles.content.active)
+  }
+
+  let spinnerClasses = [__styles.spinner]
 
   return (
-    <div
-    // className={classNames.join(' ')}
-    >
-      <div
-      // className={LoadingStyles['sbui-loading-content']}
-      >
-        {children}
-      </div>
-      {active && (
-        <IconLoader
-          size="xlarge"
-          // className={LoadingStyles['sbui-loading-spinner']}
-        />
-      )}
+    <div className={classNames.join(' ')}>
+      <div className={contentClasses.join(' ')}>{children}</div>
+      {active && <IconLoader size="xlarge" className={spinnerClasses} />}
     </div>
   )
 }

src/lib/theme/defaultTheme.ts

@@ -1563,4 +1563,18 @@ export default {
   icon: {
     container: `flex-shrink-0 flex items-center justify-center rounded-full p-3`,
   },
+
+  loading: {
+    base: `relative`,
+    content: {
+      base: `transition-opacity duration-300`,
+      active: `opacity-10`,
+    },
+    spinner: `
+      absolute
+      text-brand-900 animate-spin
+      inset-0
+      m-auto
+    `,
+  },
 }