I am using a JSON file that includes my items like so:

{
        "id": 0,
        "tab": "A",
        "img": "/images/A.jpg",
        "alt": "AAA",
        "text": "AAA"
    },
    {
        "id": 1,
        "tab": "B",
        "img": "/images/B.jpg",
        "alt": "BBB",
        "text": "BBB"
    },
    {
        "id": 2,
        "tab": "C",
        "img": "/images/C.jpg",
        "alt": "CCC",
        "text": "CCC"
    }
]

And I am using these in my React component like so:

<div className='menu-tabs>
    {interestItems.map(item => (
        <div key={item.id}>
            <span onClick={() => setActiveId(item.id)} >
                {item.tab}
            </span>
        </div>
    ))}
</div>

<div>
    <Image
        src={interestItems[activeId].img}
        alt={interestItems[activeId].alt}
        width='1000'
        height='1000'
    />
</div>
<article>
    {interestItems[activeId].text}
</article>

These images are all available in my /public/images directory so they are all static. However, when I swap from tab A to tab B for example the text loads directly, but the image lags behind, meaning image A keeps on showing until after a few seconds when B is loaded. Now I don't really understand why it would make a big difference for NextJS if the static url comes from JSON data or from within the file itself.

My question is, how can I deal with the switching tabs and images showing up later than I expect them to? Is it still possible to make use of the blur property without having to create a blurred image? And if it is not possible, could someone explain to me why that is and how should I go about blurring my image, I am pretty new to this.