add comment for initial page

Author: nemanjam

docs/working-notes/todo4.md

@@ -140,6 +140,8 @@ replace getAllPosts with getAllPostsWithReadingTime,
 spellcheck yarn script
 
 use react-icons for icons in react and not slot with astro-icons
+
+gallery cumulative layout shift, min-height, debounce 0 for first page - just set INITIAL_PAGE // ok
 ```
 
 

src/components/react/Gallery.tsx

@@ -20,6 +20,7 @@ interface Props {
 
 type LoadedStates = Record<string, boolean>;
 
+// INITIAL_PAGE controls first screen
 const { PAGE_SIZE, INITIAL_PAGE, OBSERVER_DEBOUNCE, GALLERY_ID } = GALLERY;
 
 const fetchImagesUpToPage = (images: GalleryImage[], nextPage: number): GalleryImage[] => {

src/constants/gallery.ts

@@ -5,7 +5,7 @@ export const GALLERY = {
   // Todo: make it responsive
   /** step. */
   PAGE_SIZE: 3,
-  /** page dependency in useEffect is more important */
+  /** page dependency in useEffect is more important. To load first screen quickly, set to 3 pages */
   INITIAL_PAGE: 1,
   /** fine tuned for scroll */
   OBSERVER_DEBOUNCE: 300,