Shopify App Development with Remix and Polaris - Empty State Image not Rendering

[amar4922]

Hi,

I have been trying to learn Shopify App development and have had issues getting the image in the Empty State item to show. I have been using the default one under the url: "https://cdn.shopify.com/s/files/1/0262/4071/2726/files/emptystate-files.png". What i have noticed is that when rendered by the browser there is no image shown, just a blank grey circle. This is with the tutorial downloaded from GitHub and run following the directions from "https://shopify.dev/docs/apps/getting-started/build-qr-code-app?framework=remix": 

 Despite this the path to the image is correct as when the element is inspected there exists a tag which has the correct link.

<img alt="" src="https://cdn.shopify.com/s/files/1/0262/4071/2726/files/emptystate-files.png" class="Polaris-EmptyState__Image" role="presentation">

Note what the value class is equal to.

Now looking at the documentation example (https://polaris.shopify.com/components/layout-and-structure/empty-state?shpxid=05a7bbe0-DA1B-47F1-92...) - it seems to render with the image with similar code but when that is inspected the element on this page we get: 

<img alt="" src="https://cdn.shopify.com/s/files/1/0262/4071/2726/files/emptystate-files.png" class="Polaris-EmptyState__Image Polaris-EmptyState--loaded" role="presentation">

The difference here is the class = "Polaris-EmptyState__Image Polaris-EmptyState--loaded" instead of just Polaris-EmptyState__Image" which is in the code I have used.

When the Polaris-EmptyState--loaded  is added to my code on the browser side the image is suddenly displayed but I cant change this in my source code given the boundaries of Polaris.

What I want to know is - how can i get the image to render with the correct class (like when inspecting the element in the documentation) so it actually displays? Is there something fundamental I can't seem to get my head around.

[Gordon_Chan]

Just to echo the issue.

I notice it when following the Build an App with Remix tutorial:
https://shopify.dev/docs/apps/build/build?framework=remix
I noticed:

1. I created a QR code record
2. If I start from landing page, and navigate to a QR code record, reaching the QR code detail page, the QR code appears as usual.
3. But if I refresh this QR code detail page, the EmptyState component's image element would not show the image as it is opacity:0 and the element is missing the CSS class Polaris-EmptyState--loaded

Seems this Github issue is related:

https://github.com/Shopify/polaris/issues/13197

[Appifiny]

Same issue. I also tried importing the image from an assets folder locally instead of loading from the CDN. 

It works when navigating back from another page but on the first load, the image is not shown.