Next.js Discord

Discord Forum

Tiny image (50-200kb) loading very slow when i display them in a simple page overlay.

Unanswered
Nebelung posted this in #help-forum
Open in Discord
NebelungOP
My client complains about the images loading over 30 seconds. The current code logic is to display an overlay (kind of like modal) with extra information about the project–that's where i also put an image.
The file where I'm calling an Image is under this link (the simplified code below): https://github.com/szymonhernik/Zaumne-website/blob/main/components/pages/home/Discography.tsx

'use client'

export default function Discography(props: DiscographyProps) {
  const { showcaseProjects, encodeDataAttribute } = props
  const [activeIndex, setActiveIndex] = useState(null)
  const [isInside, setIsInside] = useState(false)

  useEffect(() => {}, [activeIndex])

  const handleProjectClick = (index) => {
    setActiveIndex(index)
    setIsInside(true)
  }

  const handleClose = () => {
    setActiveIndex(null)
    setIsInside(false)
  }

  return (
    <div >
      {showcaseProjects.map((project, key) => {
        const totalItems = showcaseProjects.length
        return (
          <div>
            <ProjectListItem
              project={project}
              onClick={() => handleProjectClick(key)}
              isActive={activeIndex === key}
            />

            {/* Logic to display content only for the clicked title */}
            {activeIndex === key && (
              <div >
                  {/* ... */}
                <div className="w-[80vw] sm:max-w-md flex mx-auto mt-16 mb-16  ">
                {/* https://github.com/szymonhernik/Zaumne-website/blob/main/components/shared/ImageBox.tsx */}
                  <ImageBox
                    classesWrapper="w-full"
                    classesImage=""
                    image={project.coverImage}
                    alt={`${project.coverImage?.alt ?? ''}`}
                  />
                </div>
                {/* ... */}
              </div>
            )}
          </div>
        )
      })}
    </div>
  )
}

Git repo to the whole project: https://github.com/szymonhernik/Zaumne-website

34 Replies

NebelungOP
Please, any tips would be great!
Plott Hound
can you share a pic of the network tab when you load a page with these images? it might help to see exactly what is taking so long
NebelungOP
Sure, this is the link also: https://zaumne-website.vercel.app/
Images are loaded pretty fast on my side: i wonder if it's because someone entered the page in a different country (servers functions are pointed to Germany, im in Belgium, the client in Poland)
Plott Hound
yeah everything loaded very fast for me and im in london
only warnings i got:
where are these images stored?
NebelungOP
Sanity
Thanks Emerald for checking on your side!
Plott Hound
hmm this is really strange.
gimme a min to investigate, nice site btw
one of the modals made the image load quite slow but since then they are all really fast, even after flushing my cache
seems to be running fine now, could it have been a sanity bug?
NebelungOP
Thank you again, it's a tough one because i never had it load for more than 0.5 second, so the 20 seconds the client had scared me a bit.
They also viewed it after many changes were done to the way revalidateTags are handled so i guess maybe it was also because of that?
Do you know if there are ways to preload the images after lets say all the contents load?
they are not rendered into dom without clicking on the title, hence no preloading happening.
Plott Hound
vercel usually recreates the cache after every build so its unlikely a cache issue. it sounds more like a local browser issue your client had
NebelungOP
Should I set loading attr to "eager"?
Plott Hound
you could always make a branch with <img> instead to see if its a Image component issue
give it a go and see what happens. but im pretty confident you're doing it right and most likely it was an issue with your clients browser
it could also be to do with the AudioContext warnings
since there were so many of them. you're supposed to load/ try to play them only after the user has clicked eg a play button. most browsers dont allow automatic playback
sorry if this sounds vague but its hard without seeing all the code
NebelungOP
With the sound it's a weird bug because im not autoplaying any sounds. I have most of the buttons wrapped around BoopButton which basically plays a small click sound. The client also complained about the sound only working after using the page for quite some time, almost as if it wasnt loaded yet (but its only loaded once and immeditely and its small).
I'm using howler lib for that
Plott Hound
did you wrap your app with the provider?
NebelungOP
yes–to be able to turn off the sound (https://github.com/szymonhernik/Zaumne-website/blob/main/components/global/providers/index.tsx#L12) 
'use client'

import soundManagerInstance from '@/components/shared/SoundManager'
import { createContext, Dispatch, SetStateAction, useState } from 'react'

type SoundActiveContextType = {
  soundActive: boolean
  setSoundActive: Dispatch<SetStateAction<boolean>>
  playSound: () => void // Add the playSound property
}

export const SoundContext = createContext<SoundActiveContextType>({
  soundActive: true,
  setSoundActive: () => {},
  playSound: () => {},
})

export function SoundProvider({ children }) {
  const [soundActive, setSoundActive] = useState(true)
  const playSound = () => {
    if (soundActive) {
      soundManagerInstance.play()
    }
  }
  return (
    <SoundContext.Provider value={{ soundActive, setSoundActive, playSound }}>
      {children}
    </SoundContext.Provider>
  )
}
and have custom SoundManager component to load the sound file only once, before it was loading it as many files as there were buttons on the page (around 30).
import { Howl } from 'howler'

class SoundManager {
  sound: Howl // Add the 'sound' property

  constructor() {
    this.sound = new Howl({
      src: ['./zaumne-click.mp3'],
      preload: true,
    })
  }

  play() {
    this.sound.play()
  }
}

const soundManagerInstance = new SoundManager()
export default soundManagerInstance
Plott Hound
last time i used howler (i'm actually a sound guy) i prefered this https://www.npmjs.com/package/react-howler
NebelungOP
Okay, I'll give it a try with a plain audio web api, its a small sound just on button click. Will see if that helps with the loading times but for now i think im happy it works well for others.
Plott Hound
yeah im not getting the image loading issue at all now