ui/grid view: reveal the content using a fade in transition

apps/client/src/widgets/collections/legacy/ListOrGridView.css

@@ -170,8 +170,24 @@
     }
 }
 
+@keyframes note-preview-show {
+    from {
+        opacity: 0;
+    } to {
+        opacity: 1;
+    }
+}
+
 .nested-note-list .note-book-content,
 .note-list-container .note-book-content {
+    display: none;
+    animation: note-preview-show .25s ease-out;
+    will-change: opacity;
+
+    &.note-book-content-ready {
+        display: block;
+    }
+
     .ck-find-result {
         outline: 2px solid var(--note-list-view-content-search-result-highlight-background);
         border-radius: 4px;
@@ -182,14 +198,6 @@
 
 /* #region List view */
 
-@keyframes note-preview-show {
-    from {
-        opacity: 0;
-    } to {
-        opacity: 1;
-    }
-}
-
 .nested-note-list {
     --card-nested-section-indent: 25px;
 
@@ -246,19 +254,12 @@
 
 /* Note content preview */
 .nested-note-list .note-book-content {
-    display: none;
     outline: 1px solid var(--note-list-view-content-background);
     border-radius: 8px;
     background-color: var(--note-list-view-content-background);
     overflow: hidden;
     user-select: text;
     font-size: .85rem;
-    animation: note-preview-show .25s ease-out;
-    will-change: opacity;
-
-    &.note-book-content-ready {
-        display: block;
-    }
 
     > .rendered-content > *:last-child {
         margin-bottom: 0;

apps/client/src/widgets/collections/legacy/ListOrGridView.tsx

@@ -74,7 +74,11 @@ export function GridView({ note, noteIds: unfilteredNoteIds, highlightedTokens }
 
                 <div className={clsx("note-list-container use-tn-links", {"search-results": (noteType === "search")})}>
                     {pageNotes?.map(childNote => (
-                        <GridNoteCard note={childNote} parentNote={note} highlightedTokens={highlightedTokens} includeArchived={includeArchived} />
+                        <GridNoteCard key={note.noteId}
+                                      note={childNote}
+                                      parentNote={note}
+                                      highlightedTokens={highlightedTokens}
+                                      includeArchived={includeArchived} />
                     ))}
                 </div>