Image srcSet flashes then switches back to src image

[ettaibi]

Bug report

Describe the bug

I use srcSet to display 2 different images: one on desktop and a different one mobile. My hero image needs to take full width of the container so I use layout="fill". The bug I encounter is that on mobile the image flashes to the srcSet specified on that size then flash back to the desktop image.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:
I've written an example on codesandbox to explain what I am talking about:

1. Go to 'https://codesandbox.io/s/mutable-river-wi0uj'
2. Open in new window.
3. toggle device toolbar & use Iphone X for example, then refresh the page.
4. You will notice the moving-truck-mobile.jpg flashes then switches to moving-truck.jpg

Expected behavior

The expected behaviour should display the moving-truck-mobile.jpg on mobile, knowing that it works for me when I use the html img

<img
    src="/moving-truck.jpg"
    srcSet="/moving-truck-mobile.jpg 375w,
            /moving-truck-mobile.jpg 640w,
            /moving-truck.jpg"
     sizes="(max-width: 375px) 375px, 100%"
     width="100%"
/>

System information

• Browser : chrome
• Version of Next.js: 10.0.1