How to hide a button by default(not render) until we know if we should show it

Builder content link

Builder public api key

What are you trying to accomplish
I want to hide the ‘subscribe now’ button on page rendering by default, and then show only if the the conditional rendering to display is true. Currently, if the button should be hidden, it still renders for a split second before dissapearing. Is there a way to make it hidden on default render, and only render if conditions are true?

Screenshots or video link
Screenshot 2023-07-07 at 11.00.57 AM
The image shows where it renders for a split second and then disappears. It should be hidden if the following conditions are true: state.hasProSubscription & state.hasIntelligenceSubscription.

Code stack you are integrating Builder with
Angular, chrome

Hi there,

It looks like your space is behind a firewall, would you be able to provide credentials to be able to take a look at the page?

Hi Nick,

Yes here they are:

  • Username: Dev
  • pw: D3v@CCess


It probably because the state is rendering before the page loads , and then once it loads, the logic then runs, which is why you are experiencing these flashes.

You can try setting and defining the state on the server side before page render inside of the custom CSS + JS section.

Something like:

if (Builder.isServer) {
    // Place any code here you want to only run on the server. Any  
    // data fetched on the server will be available to re-hydrate on the client
    // if added to the state object
    state.hasProSubscription = true
    state.hasIntelligenceSubscription = true

Hi Nick,

That does work, but only when in a logged in state to not show the button upon rendering.

However, with that code implemented, the button never renders even if the user is not logged in and those conditions are false. Is there a way to make this temporary upon loading, and then if the user is logged in, have that value override these?

I can’t seem to find where you have the logic for the button should be hidden if the following conditions are true: state.hasProSubscription & state.hasIntelligenceSubscription. When I inspect the state, I only see :
Screen Shot 2023-07-07 at 1.53.55 PM

From the code above I sent, this will always set these two states to true upon load. For other, more specific cases, you can use conditionals to set when it should be true and when it should not. I don’t know what state value you use to see if a user is logged in, but it could look something like, so that these only run if user is logged in. You can also add the else condition to set the state when user is not logged in.

if (state.userIsLoggedIn == true) {
  state.hasProSubscription = true
  state.hasIntelligenceSubscription = true

Hi Nick,

Since this page is in production, I can’t load the usual state. I took the following piece of state from another page, which this page has access too, even if not shown in builder, in production.

We don’t have a ‘isSignedUp’ state, but I check the signed in status if they have an ‘email.’ However, that doesn’t necessarily mean they have the intel or pro subscription.

Would it make sense to do:

Just to confirm, the three possible outcomes are

  1. if they’re logged in AND hasProSubscription AND hasIntelligenceSubscription, then hide the button
  2. if user is logged in but doesn’t have either hasProSubscription OR hasIntelligenceSubscription, show the button
  3. if they’re not logged in, show the button

Are these the correct outcomes?

Yes, that is confirmed.

Awesome! In this case, you and your developer could look into adding this outline code which outlines the 3 scenarios above and then filling in the comments with the code that you have to hide or show the button.

Please give this a shot and let us know how it goes! :slight_smile:

Got it, will do, thank you Nick very much for the help!