Merge pull request #291 from liam-hq/loading-animation-3

feat: add loading spinner animation

frontend/.changeset/empty-numbers-exist.md

@@ -0,0 +1,6 @@
+---
+"@liam-hq/erd-core": patch
+"@liam-hq/cli": patch
+---
+
+💄 add loading spinner

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/ERDContent.module.css

@@ -4,3 +4,10 @@
   height: 100%;
   background-color: var(--global-background);
 }
+
+.loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/ERDContent.tsx

@@ -14,6 +14,7 @@ import { type FC, useCallback, useState } from 'react'
 import styles from './ERDContent.module.css'
 import { ERDContentProvider, useERDContentContext } from './ERDContentContext'
 import { RelationshipEdge } from './RelationshipEdge'
+import { Spinner } from './Spinner'
 import { TableNode } from './TableNode'
 import { useFitViewWhenActiveTableChange } from './useFitViewWhenActiveTableChange'
 import { useInitialAutoLayout } from './useInitialAutoLayout'
@@ -292,6 +293,7 @@ export const ERDContentInner: FC<Props> = ({
 
   return (
     <div className={styles.wrapper} data-loading={loading}>
+      {loading && <Spinner className={styles.loading} />}
       <ReactFlow
         nodes={nodes.map((node) => ({
           ...node,

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Spinner/Spinner.module.css

@@ -0,0 +1,42 @@
+@keyframes spin {
+  from {
+    transform: rotate(0);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+}
+
+.spinnerBox {
+  width: 300px;
+  height: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: transparent;
+  pointer-events: none;
+}
+
+.circleBorder {
+  width: 100px;
+  height: 100px;
+  padding: 1px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  background: #141616;
+  background: linear-gradient(
+    0deg,
+    rgba(29, 237, 131, 0.05) 33%,
+    rgba(29, 237, 131, 1) 100%
+  );
+  animation: spin 1.2s linear 0s infinite;
+}
+
+.circleCore {
+  width: 100%;
+  height: 100%;
+  background-color: #141616;
+  border-radius: 50%;
+}

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Spinner/Spinner.tsx

@@ -0,0 +1,17 @@
+import clsx from 'clsx'
+import type { FC } from 'react'
+import styles from './Spinner.module.css'
+
+type Props = {
+  className?: string
+}
+
+export const Spinner: FC<Props> = ({ className }) => {
+  return (
+    <span className={clsx(styles.spinnerBox, className)}>
+      <span className={styles.circleBorder}>
+        <span className={styles.circleCore} />
+      </span>
+    </span>
+  )
+}

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/Spinner/index.ts

@@ -0,0 +1 @@
+export * from './Spinner'

frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/useAutoLayout/useAutoLayout.ts

@@ -30,9 +30,11 @@ export const useAutoLayout = () => {
       })
 
       setNodes([...hiddenNodes, ...newNodes])
-      setLoading(false)
-      setInitializeComplete(true)
-      setTimeout(() => fitView(fitViewOptions), 0)
+      setTimeout(() => {
+        fitView(fitViewOptions)
+        setLoading(false)
+        setInitializeComplete(true)
+      }, 0)
     },
     [getNodes, setNodes, getEdges, fitView, setLoading, setInitializeComplete],
   )