src/components/LoadingSpinner/index.tsx

@@ -1,13 +1,14 @@
 import { createPortal } from 'react-dom'
 import styles from './style.module.scss'
+import { PropsWithChildren } from 'react'
 
 interface Props {
   desc?: string
   variant?: 'small' | 'default'
 }
 
-export const LoadingSpinner = (props: Props) => {
-  const { desc, variant = 'default' } = props
+export const LoadingSpinner = (props: PropsWithChildren<Props>) => {
+  const { desc, children, variant = 'default' } = props
 
   switch (variant) {
     case 'small':
@@ -28,7 +29,12 @@ export const LoadingSpinner = (props: Props) => {
             data-variant={variant}
           >
             <div className={styles.loadingSpinner}></div>
-            {desc && <p className={styles.loadingSpinnerDesc}>{desc}</p>}
+            {desc && (
+              <div className={styles.loadingSpinnerDesc}>
+                {desc}
+                {children}
+              </div>
+            )}
           </div>
         </div>,
         document.getElementById('root')!

src/components/LoadingSpinner/style.module.scss

@@ -42,11 +42,15 @@
   width: 100%;
   padding: 15px;
   border-top: solid 1px rgba(0, 0, 0, 0.1);
-  text-align: center;
   color: rgba(0, 0, 0, 0.5);
 
   font-size: 16px;
   font-weight: 400;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
 }
 
 @keyframes spin {