Flash of members content on page load

Hey!

First let me just say I love what you guys are doing, memberstack is awesome and definitely fills a big need of mine, so kudos!

Just having a small problem though as I get setup. I’m using memberstack with a simple static HTML page, basically it has a login/logout/profile link and some non-members only and members only content (all on the same page).

The problem is that when I load the site for the first time I get an ~2s flash where all the memberstack-esk content is displayed, including the members-only content. Also, even after the members-only content disappears (in this example the user is not logged in), it’s still taking up space in the document, in other words, there’s still a big gap between the Login and Become a member buttons.

I understand that there are limitations to the degree in which memberstack’s js lib is able to hide the content, for example all the members only content is still visible when viewing the “Page Source”, and I’m willing to accept that, but the member’s only content flash is a deal breaker for me.

I’ve replicated this behavior on Chrome/FF/Safari, and it doesn’t seem to have any correlation to my network speed

Are there any solutions that you guys have found which are able to eliminate the flash and prevent the “members only” content from taking up space in the DOM even when it’s not visible?

In general, it would be nice to have some more advanced resources or strategies for better hiding the premium content. If it makes a difference I plan on using memberstack with a gatsby js site.

Thanks!

1 Like

Hey Mike :wave:

Do you have the Memberstack code at the beginning of your header code ()? Some users will see this flash if the website is loading other code first on page load. :smiley:

Thanks for the reply Josh!

Here’s all the code for this example site, the script tag is in the head

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://api.memberstack.io/static/memberstack.js?custom" data-memberstack-id="1f432a56cf9ea59566d5005b5bc54151"> </script> 
        <title>Document</title>
    </head>
    <body>
        <a href="#/ms/login">Login</a>
          <br />
          <a href="#/ms/profile">Profile</a>
          <br />
          <a href="#/ms/logout">Logout</a>
          <br />

          <a href="#/ms/signup/5e9fe65ab932b50017497125">Become a member</a>

          <h1 data-ms-content="!members">Non Members only</h1>

          <div data-ms-content="devy">Members only</div>
          <div data-ms-content="devy">Members only</div>
    </body>
    </html>

I did some poking around in chrome’s performance tools, and I think I’ve identified the problem

The memberstack code blocks rendering until it’s loaded which is what I would expect. But it seems like it’s then making an HTTP request to get membership settings settings (api.memberstack.io). It’s only once these settings are loaded, which takes place after the initial render, that the premium content is hidden.

This makes sense, as the settings file contains information about which content needs to be hidden and which doesn’t. So it seems like memberstack doesn’t know what to “hide” and what to keep on the page until after first render, which is a bit concerning.

It seems like the core problem is that the request needs to be made to find out which data-ms-content to hide/show. Is there a default “members only” attribute that won’t require the settings to be loaded? I know you allow data-ms-content="!members" is there a data-ms-content=“members” equivalent?

Basically I need a way of default hiding the premium content until that settings file loads. If there’s no workaround I can just write that logic into my app with custom js, but wanted to see if you have a solution before I do!

Thanks again!

Appreciate the help!

Hi Mike,
What direction did you end up going on this? Would be curious to see any custom js code you ended up using!

Yes there is use data-ms-content=" contentID ". This show content only for members. :smiley:

Hi team,

I’m running into this problem myself. Using data-ms-content does not stop the flash of content to non-members. Is there any workaround for this?

I just had someone email me a video, showing how he gets around my membership system by stopping page load early. :unamused:

1 Like

Hey Aletta :wave:

There may be a workaround for this. I just tried adding this code to a page and it seems to be working. You may need to add it to the global header and footer field in the project settings.

Just wrote a quick article on this!

1 Like

Fantastic, Josh. That seems to be doing the trick for me, but I’ll send it to my guy and see if it thwarts him :slight_smile:

1 Like