Short delay when replacing Image with Glide

I wan't to simply change an image from one to another image when the user clicks on it. The problem here is that there is a short delay for about 100 milliseconds when the first image gets replaced. It is pretty annoying because you can clearly see that the image dissapears for a short time when Glide loads Image2.

Here is how I preload the Image:

            Glide
                    .with(mContext)
                    .load(imageURL)
                    .diskCacheStrategy(DiskCacheStrategy.DATA)
                    .preload();

And here is how I display the image:

            Glide
                    .with(mContext)
                    .load(imageURL)
                    .diskCacheStrategy(DiskCacheStrategy.DATA)
                    .into(holder.itemImageView);

And here is my full RecyclerViewAdapter class so you can see how I preload and create the image:

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.MyViewHolder> {
    private ArrayList<myItems> mMyItems;
    Context mContext;


    public MyAdapter(Context context, ArrayList<Item> myItems){
        mContext = context;
        mMyItems = myItems;
    }


    @NonNull
    @Override
    public MyViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View v = LayoutInflater.from(mContext).inflate(R.layout.my_item, parent, false);
        return new MyViewHolder(v);
    }

    @Override
    public void onBindViewHolder(@NonNull final MyViewHolder holder, int position) {
        MyItem currentItem = mMyItems.get(position);
 
        final String image1Url = currentItem.getImage1();
        final String image2Url = currentItem.getImage2(); 

        //Preload image1
        Glide.with(mContext)
                .load(image1Url)
                .diskCacheStrategy(DiskCacheStrategy.DATA)
                .preload();

        //Preload image2
        Glide.with(mContext)
                .load(image2Url)
                .diskCacheStrategy(DiskCacheStrategy.DATA)
                .preload();


        //Display image1  
        Glide.with(mContext)
                .load(image1Url)
                .diskCacheStrategy(DiskCacheStrategy.DATA)
                .into(holder.itemImageView);

 
 
        //item onClickListener
        holder.itemImageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                //Display image2  
                Glide.with(mContext)
                        .load(image2Url)
                        .diskCacheStrategy(DiskCacheStrategy.DATA)
                        .into(holder.itemImageView);
 
  
        });

    }

    @Override
    public int getItemCount() {
        return mMyItems.size();
    }

    public class MyViewHolder extends RecyclerView.ViewHolder{
 
        ImageView itemImageView;

        public MyViewHolder(@NonNull View itemView) {
            super(itemView); 
            itemImageView = itemView.findViewById(R.id.imageViewItem);
        }
    }

}

The delay only occurs when clicking on the button for the first time, after that there is no delay, seems like the image is then cached. Does anyone know how to fix that? The images are stored on my website as .webp files, I also tried .png but it doesn't work either.

When I call the images from the drawable folder in my project it works but that is not an option for me.

How can I fix this small delay when clicking the image the first time? Do I preload the image wrong?

EDIT

Here is a new created project to demonstrate the issue so you can test it yourself (Delay only appears on the first click, restart app to reset the issue) https://github.com/DaFaack/GlideDelayBugDemonstration

from Short delay when replacing Image with Glide