whenever 'shimmer' animation is applied on page load, the container/item would not show up in test mode

cheungysophie commented 2 weeks ago

Has your issue been reported?

[X] I have searched the existing issues and confirm it has not been reported.
[X] I give permission for members of the FlutterFlow team to access and test my project for the sole purpose of investigating this issue.

Current Behavior

i have applied the shimmer animation effect for a container on page load. but when i run it in test mode, the entire container disappears and won't show up.

Expected Behavior

the shimmer animation to work on page load, and for the container to show up

Steps to Reproduce

create a container
add the animation 'shimmer' on page load
run test mode

Reproducible from Blank

[X] The steps to reproduce above start from a blank project.

Bug Report Code (Required)

ITFfk/H134pgoctH176IKcIw+T06NVscTL4zlO1HcxAYGO/yPbJ/d+OkS1poOfXmY1NhHGC0hmYepPDKiuzpKfFfIgSdG5x8/5ZhVTzdWXq8R7rWPs6CX2t7HdFMGX6n06uzgRZBAPNpR0Y8w0ODe+Stfz/tJ5O/Zwh9f6PHaOI=

Context

i am trying to make an interactive card game, and so would like the shimmer effect to work

Visual documentation

wont show up in test mode:

this is in preview mode:

Additional Info

No response

Environment

- FlutterFlow version: v4.1.47
- Platform: mac
- Browser name and version: brave
- Operating system and version affected: mac

General

[ ] I was collaborating with other users in the same project prior to data loss
[ ] I navigated between different project views leading up to data loss
[ ] The UI was running very slowly prior to data loss
[ ] A crash or other bug occurred prior to data loss
[ ] Data was not saved in a snapshot
[ ] I was using flutterflow from multiple devices
[ ] I was using flutterflow from multiple platforms (e.g. both web and MacOS Desktop app)

Relative to the time the changes were made, data was lost within

[ ] 1 minute
[ ] 1 hour
[ ] 1 day
[ ] 1 week

When following my steps to reproduce, data loss happens

[ ] ~100% of the time
[ ] ~50% of the time
[ ] ~10% of the time
[ ] ~1% of the time
[ ] Very rarely or only encountered once

rzambroni commented 1 week ago

hey @cheungysophie, i was trying to replicate the issue you are describing but I was unable to do so with the steps you provided. The shimmer effect seems to be working as expected on the container. Are you able to replicate this on a blank project and consistently?

Thank you!

cheungysophie commented 1 week ago

hi! my apologies, try this:

create a container
apply a fill color to it
apply 'shimmer' on page load
go to test mode -> it will not appear

ITESz/Hqx89gobRe+s/PbvpQhQMkQzM6bZI7ku1EdwEhfZesPYYDP8zBfldLYtSlTFVEHVaZ/WcH06mJj87DEMInEz+qQL5gyb5XQQn/fHmQbrXQCLWVPWt7N/1mCmK0yqSRryNSKfVYW3w81GGEN/CrG3qCf9qOYwx5e6fDbOY=

here's bug report code from a blank project

https://app.flutterflow.io/project/test-og7l0a

rzambroni commented 1 week ago

Hey @cheungysophie, In the test project you provided i can see the shimmer effect working as expected, the only thing that perhaps is confusing you is that it only appears once. If you want the shimmer effect to be continuous turn on the "Loop Animation" switch.

Simulator Screen Recording - iPhone SE (3rd generation) - 2024-05-07 at 15.32.47.mp4

cheungysophie commented 1 week ago

Hi, are you able to see my screenshots from the issues - that it doesn’t show up for me in Test Mode? On May 7, 2024, at 11:33 AM, rzambroni @.***> wrote: Hey @cheungysophie, In the test project you provided i can see the shimmer effect working as expected, the only thing that perhaps is confusing you is that it only appears once. If you want the shimmer effect to be continuous turn on the "Loop Animation" switch.

Simulator Screen Recording - iPhone SE (3rd generation) - 2024-05-07 at 15.32.47.mp4

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: @.***>

rzambroni commented 1 week ago

Yes, i can see your screenshot, but i can't replicate on a blank project, we need to be able do that to confirm it and send it to the engineering team for a fix. Otherwise it might be a project specific issue.

Thanks.

khomya commented 1 week ago

I can add to this - than this containers (with shimmer effect) are not displayed in Chrome Browser in web version of the app! I have several users who reported it!

WhatsApp Image 2024-05-09 at 10 45 28 IMAGE 2024-05-09 10:53:01

there is a BUTTON with shammer effect. and its not displayed!

cheungysophie commented 1 week ago

Yes, i can see your screenshot, but i can't replicate on a blank project, we need to be able do that to confirm it and send it to the engineering team for a fix. Otherwise it might be a project specific issue.

Thanks.

https://github.com/FlutterFlow/flutterflow-issues/assets/80649756/33b4ea33-d956-46cb-90d0-f4a17e808701

please see this video:

i created a new project from scratch (this is the 3rd NEW project i've created that does not work - so i don’t believe it's a project issue)
added shimmer effect to a container
in test mode (Brave browser) it is not displayed

cheungysophie commented 1 week ago

Yes, i can see your screenshot, but i can't replicate on a blank project, we need to be able do that to confirm it and send it to the engineering team for a fix. Otherwise it might be a project specific issue. Thanks.

Screen.Recording.2024-05-09.at.10.12.55.AM-480p.mov please see this video:

i created a new project from scratch (this is the 3rd NEW project i've created that does not work - so i don’t believe it's a project issue)

added shimmer effect to a container

in test mode it is not displayed

https://app.flutterflow.io/project/shimmernotworking-s3sq8a here's the project link

rzambroni commented 1 week ago

@cheungysophie, yep i understand, i can see you can replicate on a blank project, i cloned your project and it doesn't replicate so i'm going to ask somebody else to give it a try.

rzambroni commented 1 week ago

Ok, another collaborator was able to replicate. Will send it to the team so they can take a look.
Thanks for the report!

cheungysophie commented 1 week ago

Thanks so much! SophieOn May 9, 2024, at 11:57 AM, rzambroni @.***> wrote: Ok, another collaborator was able to replicate. Will send it to the team so they can take a look.Thanks for the report!

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: @.***>

collie21 commented 1 week ago

I'm having the same issue, if i add the shimmer animation to anything whether its a column or the image itself and test the project you can see the shimmer work like in the images below, but once the page has loaded, it removes the images and leave a blank screen. any help on fixing this would be much appreciated.

Screen Shot 2024-05-10 at 11 39 48 AM Screen Shot 2024-05-10 at 11 40 31 AM

mmearly commented 5 days ago

Hi all! The underlying problem here is that shaders are not currently compatible with the Flutter web HTML renderer. This is a known issue in Flutter and has been for some time. Unfortunately we use the HTML renderer in Test Mode, so we are not bale to properly display widgets with the shimmer or tint animations there.

A workaround would be to use Run Mode instead with CanvasKit instead of HTML rendering. Go to Settings > App Settings > Web Publishing and enable Use CanvasKit. Then if you run your application in Run Mode (the dropdown next to the Test Mode button > the play button icon), you should be able to see your animations. Web Deploy with Use CanvasKit enabled should also work.

FlutterFlow / flutterflow-issues