refactor: v.0.1.2 improve notes grid rendering

before : It renders each note and calculates grid height, therefore total rendering count is twice the number of
the notes.
after : It renders all notes and calculates grid heights, then re-renders
all notes, therefore the total rendering count is just two. But, the first
rendering is opacity 0. So, only the second rendering is shown to the user

Author: LimHaksu

src/components/Note/index.ts

@@ -11,11 +11,39 @@ interface Clipboard {
     write?(notes: Array<ClipboardItem>): Promise<void>;
 }
 
-const resetHeight = (noteWrapper: HTMLElement, noteDom: HTMLElement, rowGap: number, rowHeight: number) => {
+export const removeGridBeforeNotesCreated = (noteWrapper: HTMLElement) => {
+    noteWrapper.classList.add("invisible");
     noteWrapper.style.display = "unset";
+};
+
+export const makeGridAfterNoteCreated = (noteWrapper: HTMLElement, noteDom: HTMLElement) => {
+    setTimeout(() => {
+        noteDom.style.gridRowEnd = `span ${noteDom.dataset.span}`;
+        noteWrapper.style.display = "grid";
+        noteWrapper.classList.remove("invisible");
+    });
+};
+
+export const makeGridAfterNotesCreated = (noteWrapper: HTMLElement, noteDoms: NodeListOf<HTMLElement>) => {
+    setTimeout(() => {
+        noteDoms.forEach((noteDom) => {
+            noteDom.style.gridRowEnd = `span ${noteDom.dataset.span}`;
+        });
+        noteWrapper.style.display = "grid";
+        noteWrapper.classList.remove("invisible");
+    }, 0);
+};
+
+const setHeight = (noteDom: HTMLElement, rowGap: number, rowHeight: number) => {
     const noteHieght = noteDom.getBoundingClientRect().height;
     const rowSpan = Math.ceil((noteHieght + rowGap) / (rowHeight + rowGap));
+    noteDom.dataset.span = "" + rowSpan;
     noteDom.style.gridRowEnd = `span ${rowSpan}`;
+};
+
+const resetHeight = (noteWrapper: HTMLElement, noteDom: HTMLElement, rowGap: number, rowHeight: number) => {
+    noteWrapper.style.display = "unset";
+    setHeight(noteDom, rowGap, rowHeight);
     noteWrapper.style.display = "grid";
 };
 
@@ -60,7 +88,9 @@ export const createNote = (note: NerorenClipboardType, settings: Settings) => {
                 const imageContent = document.createElement("img") as HTMLImageElement;
                 imageContent.className = "image";
                 imageContent.onload = () => {
-                    resetHeight(noteWrapper, noteDom, rowGap, rowHeight);
+                    setTimeout(() => {
+                        resetHeight(noteWrapper, noteDom, rowGap, rowHeight);
+                    }, 0);
                 };
                 imageContent.src = content;
                 contentDom.appendChild(imageContent);
@@ -109,7 +139,7 @@ export const createNote = (note: NerorenClipboardType, settings: Settings) => {
             }
 
             // set height for grid
-            resetHeight(noteWrapper, noteDom, rowGap, rowHeight);
+            setHeight(noteDom, rowGap, rowHeight);
         }, 0);
 
         const buttonWrapper = document.createElement("div");
@@ -240,14 +270,13 @@ export const createNote = (note: NerorenClipboardType, settings: Settings) => {
         timeDom.className = "time";
         bottomWrapper.appendChild(timeDom);
 
-        setTimeout(() => {
-            noteWrapper.style.display = "unset";
-            const noteHieght = noteDom.getBoundingClientRect().height;
-            const rowSpan = Math.ceil((noteHieght + rowGap) / (rowHeight + rowGap));
-            noteDom.style.gridRowEnd = `span ${rowSpan}`;
-            noteWrapper.style.display = "grid";
-        }, 0);
         noteWrapper?.insertBefore(noteDom, noteWrapper.firstChild);
+
+        const noteHieght = noteDom.getBoundingClientRect().height;
+        const rowSpan = Math.ceil((noteHieght + rowGap) / (rowHeight + rowGap));
+        noteDom.dataset.span = `${rowSpan}`;
+
+        return noteDom;
     }
 };
 

src/components/Note/note.scss

@@ -1,5 +1,18 @@
 @import "../../variables.scss";
 
+.note-wrapper {
+    margin: 0 8px 8px 8px;
+    min-height: 60px;
+    display: grid;
+    grid-gap: 16px;
+    grid-template-columns: repeat(auto-fit, 310px);
+    grid-auto-rows: 10px;
+
+    &.invisible * {
+        opacity: 0;
+    }
+}
+
 .note {
     position: relative;
     display: flex;
@@ -20,7 +33,6 @@
 .corner-shadow {
     content: "";
     position: absolute;
-    opacity: 1;
     z-index: -1;
     right: -0px;
     bottom: 20px;

src/popup.scss

@@ -3,12 +3,3 @@ body {
     margin: 0;
     user-select: none;
 }
-
-.note-wrapper {
-    margin: 0 8px 8px 8px;
-    min-height: 60px;
-    display: grid;
-    grid-gap: 16px;
-    grid-template-columns: repeat(auto-fit, 310px);
-    grid-auto-rows: 50px;
-}

src/popup.ts

@@ -1,4 +1,9 @@
-import { createNote } from "./components/Note";
+import {
+    createNote,
+    removeGridBeforeNotesCreated,
+    makeGridAfterNotesCreated,
+    makeGridAfterNoteCreated,
+} from "./components/Note";
 import { setHeader, changeHeaderLanguage } from "./components/Header";
 import { changeTopModalLanguage } from "./components/TopModal";
 import { Language } from "./libs/language";
@@ -67,9 +72,14 @@ export const initNotes = (settings: Settings) => {
     chrome.storage.local.get(NerorenClipboard, (result) => {
         const notes: NerorenClipboardType[] = result[NerorenClipboard];
         if (notes) {
+            const noteWrapper = document.querySelector("#note-wrapper") as HTMLElement;
+            removeGridBeforeNotesCreated(noteWrapper);
             notes.forEach((note) => {
                 createNote(note, settings);
             });
+
+            const noteDoms = document.querySelectorAll<HTMLElement>(".note");
+            makeGridAfterNotesCreated(noteWrapper, noteDoms);
         }
     });
 };
@@ -89,7 +99,10 @@ chrome.runtime.onMessage.addListener((message) => {
         switch (type) {
             case "createNote":
                 const { note } = message;
-                createNote(note, settings);
+                const noteWrapper = document.querySelector("#note-wrapper") as HTMLElement;
+                removeGridBeforeNotesCreated(noteWrapper);
+                const createdNoteDom = createNote(note, settings) as HTMLElement;
+                makeGridAfterNoteCreated(noteWrapper, createdNoteDom);
                 break;
             case "changePopupLanguage":
                 changeHeaderLanguage(settings.language);