Eliminating flicker when using default flag values
Read time: 3 minutes
Last edited: May 01, 2024
Overview
This topic explains how to resolve issues that can arise from using default flag values on page load. You can use these solutions with the JavaScript and React Web SDKs.
When using feature flags on your website, the content that the end user receives often depends on the values of those flags. If the page is initially rendered with one set of flag variations and then updated with a new set, this can cause a jarring switch between two views of the content. This can appear as a "flash" or "flicker" of the initial content during a page load. Usually we don't expect this to happen, but under certain use cases extra steps might be necessary to prevent it.
Causes
Because feature flags must be evaluated for a particular context to get the correct variations, the default behavior of the JavaScript and React Web SDKs is to request the flags for that user from LaunchDarkly's servers. After the SDK retrieves the flags, it sends a ready event to signal that it is ready to evaluate flags. If the page is initially rendered before the ready event triggers an update to the page, the initial rendering could be displayed briefly before the final page content.
Options for resolving
You have several options for addressing this initial "flicker," including the following:
- Initialize the client earlier
- Don't draw the page until you have the flag values
- Bootstrap the flag values
- Use React Web's
asyncWithLDProviderfunction
Initialize the client earlier
To reduce the chance and duration of these flashes, you can optimize your page to allow evaluating the flags earlier. By moving LaunchDarkly's script higher in the page's <head> and initializing the SDK earlier in your code, you can reduce the amount of time waiting for the SDK script to download and the SDK to initialize. This means drawing the right content earlier, preventing or reducing the impact of "flashes."
Block drawing the page until the flag values are available
A different approach is to block showing the page content until the ready event signals that the flag values are available. To use this approach, set the styling on the body to be hidden at the start of loading the page. When the SDK sends the ready event, update the page content based on the flag values. Then set the body to be visible. This means only drawing the right content. However, the SDK may take 100ms or more to fetch the flag values, so this approach can lead to an undesirable delay in page load time.
Bootstrap the flag values to be available immediately
Bootstrapping refers to providing the LaunchDarkly client object with an initial, immediately available set of feature flag values. Then, your code can call variation on page load with no delay. With this approach the SDK does not fetch the flags, and instead directly uses the given bootstrap flag values. This allows flag evaluation to be ready immediately. To learn more, read Bootstrapping.
Use the React Web SDK's asyncWithLDProvider function
If you are using the React Web SDK, another option is to use the asyncWithLDProvider function. To learn more, read Initialize using asyncWithLDProvider.