Add back the nice fade-in

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

@@ -1,3 +1,23 @@
 i-bs {
     cursor: move;
 }
+
+.fade.show {
+  animation: pngx-entry-fade 160ms ease-out;
+}
+
+@keyframes pngx-entry-fade {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fade.show {
+    animation: none;
+  }
+}

src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss

@@ -2,6 +2,26 @@
   overflow-wrap: anywhere;
 }
 
+.fade.show {
+  animation: pngx-entry-fade 160ms ease-out;
+}
+
+@keyframes pngx-entry-fade {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fade.show {
+    animation: none;
+  }
+}
+
 .doc-img-container {
   position: relative;
 }

src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss

@@ -2,6 +2,26 @@
   font-size: 90%;
 }
 
+.fade.show {
+  animation: pngx-entry-fade 160ms ease-out;
+}
+
+@keyframes pngx-entry-fade {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fade.show {
+    animation: none;
+  }
+}
+
 .doc-img {
   object-fit: cover;
   object-position: top left;