view record loader

Author: lyubov-voloshko

frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.html

@@ -45,8 +45,6 @@ <h2 class="mat-heading-2 row-preview-sidebar__title">Preview</h2>
     </ng-container>
 
     <ng-template #loadingContent>
-        <div class="row-preview-sidebar__loading">
-            <span>Loading...</span>
-        </div>
+        <app-placeholder-record-view></app-placeholder-record-view>
     </ng-template>
 </div>

frontend/src/app/components/dashboard/db-table-row-view/db-table-row-view.component.ts

@@ -10,6 +10,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { NotificationsService } from 'src/app/services/notifications.service';
 import { TableStateService } from 'src/app/services/table-state.service';
 import { normalizeFieldName } from 'src/app/lib/normalize';
+import { PlaceholderRecordViewComponent } from '../../skeletons/placeholder-record-view/placeholder-record-view.component';
 
 @Component({
   selector: 'app-db-table-row-view',
@@ -21,15 +22,11 @@ import { normalizeFieldName } from 'src/app/lib/normalize';
     ClipboardModule,
     MatTooltipModule,
     RouterModule,
-    CommonModule
+    CommonModule,
+    PlaceholderRecordViewComponent
   ]
 })
 export class DbTableRowViewComponent implements OnInit {
-  // @Input() structure: object[];
-  // @Input() foreignKeys: object;
-  // @Input() foreignKeysList: string[];
-  // @Input() widgets: { string: Widget };
-  // @Input() widgetsList: string[];
   @Input() activeFilters: object;
 
   public selectedRow: TableRow;
@@ -46,7 +43,6 @@ export class DbTableRowViewComponent implements OnInit {
 
   ngOnInit(): void {
     this._tableState.cast.subscribe((row) => {
-      console.log('Row selected:', row);
       this.selectedRow = row;
       if (row.columnsOrder) {
         const columnsOrder = this.selectedRow.columnsOrder.length ? this.selectedRow.columnsOrder : Object.keys(this.selectedRow.record);

frontend/src/app/components/skeletons/placeholder-record-view/placeholder-record-view.component.css

@@ -0,0 +1,22 @@
+.record-field {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    padding: 12px 16px;
+}
+
+.record-field:not(:last-child) {
+    border-bottom: solid 1px rgba(0, 0, 0, 0.12);
+}
+
+.record-field__key {
+    mix-blend-mode: normal !important;
+    height: 20px;
+    width: 120px;
+}
+
+.record-field__value {
+    mix-blend-mode: normal !important;
+    height: 20px;
+    width: 200px
+}

frontend/src/app/components/skeletons/placeholder-record-view/placeholder-record-view.component.html

@@ -0,0 +1,22 @@
+<div class="wrapper skeleton">
+    <div class="record-field">
+        <div class="bone record-field__key"></div>
+        <div class="bone record-field__value"></div>
+    </div>
+    <div class="record-field">
+        <div class="bone record-field__key"></div>
+        <div class="bone record-field__value"></div>
+    </div>
+    <div class="record-field">
+        <div class="bone record-field__key"></div>
+        <div class="bone record-field__value"></div>
+    </div>
+    <div class="record-field">
+        <div class="bone record-field__key"></div>
+        <div class="bone record-field__value"></div>
+    </div>
+    <div class="record-field">
+        <div class="bone record-field__key"></div>
+        <div class="bone record-field__value"></div>
+    </div>
+</div>

frontend/src/app/components/skeletons/placeholder-record-view/placeholder-record-view.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PlaceholderRecordViewComponent } from './placeholder-record-view.component';
+
+describe('PlaceholderRecordViewComponent', () => {
+  let component: PlaceholderRecordViewComponent;
+  let fixture: ComponentFixture<PlaceholderRecordViewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PlaceholderRecordViewComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PlaceholderRecordViewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/components/skeletons/placeholder-record-view/placeholder-record-view.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-placeholder-record-view',
+  imports: [],
+  templateUrl: './placeholder-record-view.component.html',
+  styleUrl: './placeholder-record-view.component.css'
+})
+export class PlaceholderRecordViewComponent {
+
+}