From 88eacb801855062c7e448a12a34d1ed5a756049f Mon Sep 17 00:00:00 2001
From: Maria Katrin Bonde <78419778+MariaBonde@users.noreply.github.com>
Date: Wed, 28 Aug 2024 14:27:22 +0200
Subject: [PATCH] picture loading is slow, attempting to fix (#536)

---
 src/hemsedal24/bilder.module.css    | 1 +
 src/hemsedal24/bilder.tsx           | 5 ++---
 src/hemsedal24/components/Files.tsx | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/hemsedal24/bilder.module.css b/src/hemsedal24/bilder.module.css
index 873556e53..202c3150e 100644
--- a/src/hemsedal24/bilder.module.css
+++ b/src/hemsedal24/bilder.module.css
@@ -205,6 +205,7 @@ html {
   }
   .container {
     margin-bottom: 4rem;
+    grid-template-columns: repeat(3, 1fr);
   }
 
   .uploadDropZone {
diff --git a/src/hemsedal24/bilder.tsx b/src/hemsedal24/bilder.tsx
index bf8d268b7..4247fb6cb 100644
--- a/src/hemsedal24/bilder.tsx
+++ b/src/hemsedal24/bilder.tsx
@@ -28,7 +28,7 @@ export default function Bilder() {
     console.log(data);
     setFilesData(data);
   };
-
+console.log((width/21)+(((width / 100) | 0)/4))
   const [filesData, setFilesData] = useState(null);
   useEffect(() => {
     fetchFiles();
@@ -40,8 +40,7 @@ export default function Bilder() {
           <span>Tilbake</span>
         </Link>
       <div id="header" className={styles.header}>
-        <h3>{mobile ? `Bild${'e'.repeat((width/21.1))}r 📸` : 'Bildeeeeeeeeeeeeeeeeeeeer 📸'}</h3>
-
+        <h3>{mobile ? `Bild${'e'.repeat((width/24))}r 📸` : 'Bildeeeeeeeeeeeeeeeeeeeer 📸'}</h3>
         <div className={styles.uploadDropZone}>
           <UploadButton
             className={`${styles.customButton}`}
diff --git a/src/hemsedal24/components/Files.tsx b/src/hemsedal24/components/Files.tsx
index deb2863f5..17982d169 100644
--- a/src/hemsedal24/components/Files.tsx
+++ b/src/hemsedal24/components/Files.tsx
@@ -27,7 +27,7 @@ export default function Files({ data }: any) {
       <div id="pictureContainer" className={styles.container}>
       {data.files.map((file:any, index:number) =>
       <div key={file.id} className={styles.image} onClick={()=>imageClicked(file.id, index)} tabIndex={0} role="button" aria-label='open picture' onKeyDown={()=>imageClicked(file.id, index)}>
-        <img src={`https://utfs.io/f/${file.key}`} alt={` ${file.name}`}/></div>)} </div>  :<div className={styles.nopictures}><h4>Ingen bilder ennå!</h4></div>}
+        <img loading="lazy" src={`https://utfs.io/f/${file.key}`} alt={` ${file.name}`}/></div>)} </div>  :<div className={styles.nopictures}><h4>Ingen bilder ennå!</h4></div>}
      
       {isPopoverOpen && (
         <Popover onClose={closePopoever}>
@@ -35,7 +35,7 @@ export default function Files({ data }: any) {
             <div className={styles.embla__container}>
               {data.files.map((file:any) =>
               <div key = {file.id} className={styles.embla__slide}>
-                <img  src={`https://utfs.io/f/${file.key}`} alt={`${file.name}`}/>
+                <img loading="lazy"  src={`https://utfs.io/f/${file.key}`} alt={`${file.name}`}/>
                 </div>
               )}
             </div>