[New Free Plugin] Heroicons 2.0

@Kayami This plugin is great but I’m starting to have issues with it which would make it unusable! I hope you can help.

It is now sporadically showing the text instead of the icon inside a button (orange box is the button):
image

When I hover over it, it snaps into the correct display:
image

This is what I have in the editor:
image

But it doesn’t seem to be an editor issue. I have other buttons using the plugin and they aren’t having an issue. So I’m not sure why this would be happening here.

I read the Heroicons docs: Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.

It does say "In case the plugin occasionally fails to detect icons, it’s possible to run the Iconify action on page load as insurance. " But I don’t have an Iconify action; where does that come from?

1 Like

hey @johndurso, do you have a link to a page where this consistently happens? then we can try to debug the issue!

2 Likes

I saw your message this morning and as I was preparing to create a page for you, it clicked - I had just turned on this experimental feature in the Versions tab:

New, more performant elements rendering
This feature enables a new experimental rendering pipeline which more optimally renders any elements you have on the page. It does so by precomputing a lot of the properties on the server beforehand, and shipping a static CSS file to the client to avoid repeated work.

Note: This feature only affects new responsive pages.

I turned it off and I have been testing and haven’t seen the problem yet. Even though it wasn’t happening consistently yesterday, I never saw it before turning this on and I haven’t seen it since so I’m fairly confident that’s where the issue is.

I’m turning that feature off for now but it would be great if Heroicons could work with it! Either way, hopefully my experience helps other users avoid banging their head against the wall as I was :slight_smile:

Do you think this is possible to solve for in Heroicons, or no?

1 Like

hey!

yes i actually forgot about that, that feature totally breaks the plugin - have been seeing more reports from others too.

it’s on the list to investigate / fix but there is absolutely 0 docs by the bubble team to know what kind of changes enabling that feature makes :sweat_smile:

that means we’ll have to trial and error it ourselve / investigate the HTML

in any case, we know about it and will try to have it work in both cases, with and without the experimental feature enabled.

3 Likes

Hey @Kayami, the new Build 21 total breaks the plugin. I’m seeing this now.
image

And this

Maybe @kathleen could enlighten you as to what needs to be changed. Basically, we are stuck at build 20 as this breaks every button we have in our app.

2 Likes

hey all, we’re aware of the version 21 of the engine issue and working on shipping a fix in the next few days!

1 Like

Hey @Kayami, great work on the update as I now can go to version 21.

I discovered a strange problem in testing with one specific icon that won’t render in a button.

Try this: [hio-l-20]question-mark-circle[/hio-l-20] Help

Tried it in Edge, Chrome, and Firefox and it doesn’t render anywhere. I double checked the text on the Heroicons site. All correct.

Thoughts?

1 Like

yup, working on a fix @treb.gatte

seems like the v21 engine is forcing us to update the entire code so now we need to make sure it maintains backwards compatibility :sweat:

2 Likes

@treb.gatte can you try the most recent version? 3.3.6?

1 Like

@Kayami The spinner animation isn’t working on a button that’s in a reusable element. When I click on the button, a custom state triggers this action…and here’s the result (see below).

Is there something I’m missing ? Thanks in advance.

Screenshot 2023-02-03 at 7.35.03 PM

@Kayami since I upgraded to Bubble v21, I’m getting a flash of [hil]spinner[/hil] text before the actual icon shows. If the processing is fast enough, the spinner never shows, just the bracketed text before the process is done.

I wonder if this is possible to have work with Bubble’s CSS computed server side?

@saviorabrams @johndurso yes, the v21 engine is causing all sorts of issues with the plugin

have you tried upgrading to 3.3.7 to see if it’s resolved?

1 Like

Yep, I’m on v3.3.7 of Heroicons. v21 seemed to me to be causing more problems around my app as well so I’m sticking with v20 for now. It seems to be ignoring state for some important things and I’m not finding any workarounds.

Same, cant switch states. Example: Text button default is “Go”

Condition: If Button loading is “Yes” then button text is [hil]cursor-arrow-ripple[/hil]Click on me!

Action: set state of button " Yes"

Result:
Button changes to [hil]cursor-arrow-ripple[/hil]Click on me!

But when you set state back to No, it does not switch back

1 Like

I’m experiencing the same issue with states as well. I’m on v21 and not sure if I should revert back to v20. Is the problem happening on v20 @johndurso?

Yep that was happening to me when updated to v21, and stopped when I reverted to v20. I wonder if this is related only to Heroicons or a more general problem with states and v21. I didn’t do enough testing to sort it out. I did file a bug report though.

Definitely a v21 issue with Heroicons 2.0. I removed the heroicon trigger “[hir]spinner[/hir] Submitting…” and the custom state kicked in just fine. For now, I’m going to use an animated GIF until this plugin get fixed. Love this plugin, hate to let it go for now :frowning:

@saviorabrams That’s interesting, how do you use a gif in a button?

No problem, simply put the button inside a group. The container layout for this group needs to be Align To Parent. Add the animated gif to this group and adjust it’s positioning, you can also edit the margins to fit your needs.

The GIF just needs to be the right size you desire, which might take some work.

To show and hide this GIF, just use a custom state.
Example: Show GIF when custom state is “loading”
Hide GIF when custom state is “completed”

For some free animations, you can try: https://lottiefiles.com/
Google searched and found this as well: https://loading.io/
For icons and preloaders, I pay $13/month for: https://icons8.com
and they have preloaders too: https://icons8.com/preloaders

2 Likes

Ah I was wondering if I had done anything wrong, I’m relieved to see it’s a plugin issue in a sense. Any plans to fix this?? It’s a great plugin, would be nice to not have to go back to v20…

EDIT: Just saw there’s already a fix, just have to upgrade the plugin