Chore: refactor loading stuff to be more DRY

src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.html

@@ -1,4 +1,4 @@
-<div class="card shadow-sm bg-light fade" [class.reveal]="reveal" cdkDrag [cdkDragDisabled]="!draggable" cdkDragPreviewContainer="parent">
+<div class="card shadow-sm bg-light fade" [class.show]="show" cdkDrag [cdkDragDisabled]="!draggable" cdkDragPreviewContainer="parent">
   <div class="card-header">
     <div class="d-flex justify-content-between align-items-center">
       <div class="d-flex">

src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.scss

@@ -1,12 +1,3 @@
 i-bs {
     cursor: move;
 }
-
-.card {
-    opacity: 0;
-    transition: opacity .2s;
-}
-
-.reveal {
-    opacity: 1;
-}

src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.spec.ts

@@ -53,9 +53,9 @@ describe('WidgetFrameComponent', () => {
     expect(fixture.debugElement.query(By.css('.spinner-border'))).not.toBeNull()
   })
 
-  it('should reveal', () => {
-    expect(component.reveal).toBeFalsy()
+  it('should show', () => {
+    expect(component.show).toBeFalsy()
     jest.advanceTimersByTime(100)
-    expect(component.reveal).toBeTruthy()
+    expect(component.show).toBeTruthy()
   })
 })

src-ui/src/app/components/dashboard/widgets/widget-frame/widget-frame.component.ts

@@ -25,7 +25,7 @@ export class WidgetFrameComponent
 
   ngAfterViewInit(): void {
     setTimeout(() => {
-      this.reveal = true
+      this.show = true
     }, 100)
   }
 }