Progress bar is not showing in embedded ReactJS App in Shopify

[mohitmohanwork]

I am facing a strange issue - the Story progress bar is not displaying when we add it as react embedded App in Shopify; see below recoding - https://www.loom.com/share/ba1a1fe4fd504b87ab9776d0de86172f

The same work fine, in the Standalone React App.

Any help will be highly appreciated.

[evan9523]

Hey @mohitmohanwork we faced the same issue. In our css file in the app, we placed this code snippet and it worked on shopify. Actually shopify overrides some places.

div:empty{
display: block;
}

[mohitmohanwork]

Thank you for the response, magically without any changes the Progress bar is showing on my customer website (Shopify), but it doesn't show in my test environment for Shopify. New Issue - The Progress bar at times gets very slow, to complete the first image it ist taking 20+ seconds, No clue, No Logs to troubleshoot!! Is there any alternate to this Story Component which anyone has used?

…

On Fri, Dec 30, 2022 at 4:07 PM devevan ***@***.***> wrote: Hey @mohitmohanwork <https://github.com/mohitmohanwork> we faced the same issue. In our css file in the app, we placed this code snippet and it worked on shopify. Actually shopify overrides some places. div:empty{ display: block; } — Reply to this email directly, view it on GitHub <#248 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASW3BEHSN4OJKH4XNQMPXFLWP23N5ANCNFSM6AAAAAAS5LXLAE> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[evan9523]

@mohitmohanwork We converted all images to svg, added the durationInterval prop to 3000 (3 seconds). This fixed it. You can view it in action here https://fabbeu.com/ (Bottom Right Purple logo plugin -> Scroll down to 'HOW TO REDEEM CASHBACK'). This is in production.

Also alternatively you can try https://www.npmjs.com/package/stories-react

[mohitk05]

Hello, closing this issue, please reopen if the issue still persists.