picture loading is slow, attempting to fix (#536)

src/hemsedal24/bilder.module.css

@@ -205,6 +205,7 @@ html {
   }
   .container {
     margin-bottom: 4rem;
+    grid-template-columns: repeat(3, 1fr);
   }
 
   .uploadDropZone {

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}`}

src/hemsedal24/components/Files.tsx

@@ -27,15 +27,15 @@ 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}>
           <div className={styles.embla} ref={emblaRef}>
             <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>