Eliminating flicker when using default flag values
Read time: 3 minutes
Last edited: Apr 06, 2023
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.
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.
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
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."
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.
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.
If you are using the React Web SDK, another option is to use the
asyncWithLDProvider function. To learn more, read Initializing using asyncWithLDProvider.