From 143a14318593224c696b4b591db369f2319da96e Mon Sep 17 00:00:00 2001
From: Lyubov Voloshko <lyubov@voloshko.com>
Date: Wed, 30 Jul 2025 11:34:00 +0300
Subject: [PATCH] record view: move related records loader to record view
 loader

---
 .../db-table-row-view.component.css           | 20 -------------------
 .../db-table-row-view.component.html          |  7 -------
 .../placeholder-record-view.component.css     | 20 +++++++++++++++++++
 .../placeholder-record-view.component.html    |  6 ++++++
 4 files changed, 26 insertions(+), 27 deletions(-)

diff --git a/frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.css b/frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.css
index b6865eacc..f4f887777 100644
--- a/frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.css
+++ b/frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.css
@@ -158,23 +158,3 @@
 .related-records__panel ::ng-deep .mat-expansion-panel-body {
     padding: 0 8px;
 }
-
-.loading-related-records {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 8px 0 16px;
-}
-
-.loading-related-records__title {
-    mix-blend-mode: normal !important;
-    height: 28px;
-    width: 120px;
-}
-
-.loading-related-records__button {
-    mix-blend-mode: normal !important;
-    border-radius: 50%;
-    height: 36px;
-    width: 36px;
-}
\ No newline at end of file
diff --git a/frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.html b/frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.html
index 83d608b23..6cd5b71f9 100644
--- a/frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.html
+++ b/frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.html
@@ -79,13 +79,6 @@ <h2 class="mat-heading-2 row-preview-sidebar__title">Preview</h2>
         </mat-accordion>
     </mat-expansion-panel>
 
-    <div *ngIf="!selectedRow?.relatedRecords?.referenced_by">
-        <div class="skeleton loading-related-records">
-            <div class="bone loading-related-records__title"></div>
-            <div class="bone loading-related-records__button"></div>
-        </div>
-    </div>
-
     <ng-container *ngIf="selectedRow && selectedRow.record; else loadingContent">
         <div *ngFor="let column of columns" class="row-preview-sidebar__field">
             <strong>{{column.normalizedTitle}}</strong>
diff --git a/frontend/src/app/components/skeletons/placeholder-record-view/placeholder-record-view.component.css b/frontend/src/app/components/skeletons/placeholder-record-view/placeholder-record-view.component.css
index 1712923fc..c25289e8a 100644
--- a/frontend/src/app/components/skeletons/placeholder-record-view/placeholder-record-view.component.css
+++ b/frontend/src/app/components/skeletons/placeholder-record-view/placeholder-record-view.component.css
@@ -1,3 +1,23 @@
+.loading-related-records {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 8px 0 16px;
+}
+
+.loading-related-records__title {
+    mix-blend-mode: normal !important;
+    height: 28px;
+    width: 120px;
+}
+
+.loading-related-records__button {
+    mix-blend-mode: normal !important;
+    border-radius: 50%;
+    height: 36px;
+    width: 36px;
+}
+
 .record-field {
     display: flex;
     flex-direction: column;
diff --git a/frontend/src/app/components/skeletons/placeholder-record-view/placeholder-record-view.component.html b/frontend/src/app/components/skeletons/placeholder-record-view/placeholder-record-view.component.html
index 9934a7417..c45399893 100644
--- a/frontend/src/app/components/skeletons/placeholder-record-view/placeholder-record-view.component.html
+++ b/frontend/src/app/components/skeletons/placeholder-record-view/placeholder-record-view.component.html
@@ -1,4 +1,10 @@
 <div class="wrapper skeleton">
+    <div>
+        <div class="skeleton loading-related-records">
+            <div class="bone loading-related-records__title"></div>
+            <div class="bone loading-related-records__button"></div>
+        </div>
+    </div>
     <div class="record-field">
         <div class="bone record-field__key"></div>
         <div class="bone record-field__value"></div>