I’m having a problem with a video carousel component on my website creation, using caffeine. It seems to be stuck in a loading state, showing a spinning animation instead of playing the videos. Its stuck in draft code tab, with the pen spining….been over an hour.
I’ve already checked the code for common issues, and the logic seems to be in place. The videos are hosted locally with fallback videos from a different domain.
Has anyone else experienced a similar issue? Any advice on what to check next would be greatly appreciated.
Managed to debug using gemini to analyse the code and caffeines responses, took 2 prompts and debugged the video loading issue.
“You’re correct about the state management issue. The problem is that the carousel starts before all videos have been checked. Let’s fix this. Please add a new state variable, isReady, initialized to false. In the useEffect that checks the videos, update isReady to true only when the loading state for all videos has been set. This will prevent the carousel setInterval from starting too early. Then, in the useEffect that manages the carousel interval, ensure it only runs when isReady is true. Provide a single, complete code block for the Hero component with these changes implemented."
This fixes it…