From bb8f2a5b1eb7073e16d90fa6feefd060e60254fc Mon Sep 17 00:00:00 2001
From: "ryota.sasazawa" <ryota.sasazawa@route06.co.jp>
Date: Fri, 20 Dec 2024 16:44:24 +0900
Subject: [PATCH 1/2] fix: Render CardinalityMarkers based on loading state

---
 .../src/components/ERDRenderer/ERDContent/ERDContent.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/ERDContent.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/ERDContent.tsx
index 16fd370fc..5bd1484f8 100644
--- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/ERDContent.tsx
+++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/ERDContent.tsx
@@ -158,7 +158,7 @@ export const ERDContentInner: FC<Props> = ({
         selectionOnDrag
         deleteKeyCode={null} // Turn off because it does not want to be deleted
       >
-        <CardinalityMarkers />
+        {!loading && <CardinalityMarkers />}
         <Background
           color="var(--color-gray-600)"
           variant={BackgroundVariant.Dots}

From b63e2dad86cd5f8509b44cf612c3bde1050e7c71 Mon Sep 17 00:00:00 2001
From: "ryota.sasazawa" <ryota.sasazawa@route06.co.jp>
Date: Fri, 20 Dec 2024 17:28:24 +0900
Subject: [PATCH 2/2] fix: use css to be non-visible cardinalities on loading

---
 frontend/.changeset/gentle-monkeys-remember.md              | 6 ++++++
 .../src/components/ERDRenderer/ERDContent/ERDContent.tsx    | 2 +-
 .../ERDContent/RelationshipEdge/RelationshipEdge.module.css | 1 +
 3 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 frontend/.changeset/gentle-monkeys-remember.md

diff --git a/frontend/.changeset/gentle-monkeys-remember.md b/frontend/.changeset/gentle-monkeys-remember.md
new file mode 100644
index 000000000..fd75cb6d2
--- /dev/null
+++ b/frontend/.changeset/gentle-monkeys-remember.md
@@ -0,0 +1,6 @@
+---
+"@liam-hq/erd-core": patch
+"@liam-hq/cli": patch
+---
+
+fix: Render CardinalityMarkers based on loading state
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/ERDContent.tsx b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/ERDContent.tsx
index 5bd1484f8..16fd370fc 100644
--- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/ERDContent.tsx
+++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/ERDContent.tsx
@@ -158,7 +158,7 @@ export const ERDContentInner: FC<Props> = ({
         selectionOnDrag
         deleteKeyCode={null} // Turn off because it does not want to be deleted
       >
-        {!loading && <CardinalityMarkers />}
+        <CardinalityMarkers />
         <Background
           color="var(--color-gray-600)"
           variant={BackgroundVariant.Dots}
diff --git a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/RelationshipEdge/RelationshipEdge.module.css b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/RelationshipEdge/RelationshipEdge.module.css
index eaa6358dd..85bdd71da 100644
--- a/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/RelationshipEdge/RelationshipEdge.module.css
+++ b/frontend/packages/erd-core/src/components/ERDRenderer/ERDContent/RelationshipEdge/RelationshipEdge.module.css
@@ -6,6 +6,7 @@
 
 :global([data-loading='true']) .edge {
   stroke: transparent;
+  opacity: 0;
 }
 
 marker {