Anti-flicker modes
Use scoped, full-page, custom, or disabled anti-flicker behavior in the Apex SDK.
Anti-flicker hides content while the SDK resolves assignments and applies mutations. The default is scoped hiding: Apex hides only selectors referenced by active experiment mutations and antiFlickerSelectors.
Modes
import { init } from "@drip-apex/sdk";
init({
shopId: "demo-shop",
endpoint: "https://events.drip-apex.com",
antiFlickerMode: "scoped",
antiFlickerTimeoutMs: 1200
});| Mode | Behavior | Use when |
|---|---|---|
scoped | Hides mutated selectors only. | Most production installs. |
full | Hides the full page until reveal or timeout. | Legacy compatibility or QA forcing when scoped selectors are not known before fetch. |
custom | Injects antiFlickerCustomCss. | You need exact project-specific hiding CSS. |
off | Disables anti-flicker CSS. | Server-rendered variants, tests, or pages where flicker is less risky than hiding. |
Custom CSS
init({
shopId: "demo-shop",
endpoint: "https://events.drip-apex.com",
antiFlickerMode: "custom",
antiFlickerCustomCss: `
[data-apex-critical] {
opacity: 0 !important;
}
`,
antiFlickerTimeoutMs: 900
});The SDK removes anti-flicker styles after mutations apply, when the timeout expires, or when config fetch fails.
Async config fetch
When the SDK fetches config by shopId, it arms anti-flicker during fetch if no fresh cache is available and antiFlickerMode is not "off". If fetched config arrives after the reveal budget, lateConfigPolicy decides whether to skip it or apply it.
init({
shopId: "demo-shop",
endpoint: "https://events.drip-apex.com",
antiFlickerMode: "scoped",
antiFlickerTimeoutMs: 1200,
lateConfigPolicy: "skip"
});Deprecated aliases
Use antiFlickerMode and antiFlickerTimeoutMs in new code. antiFlicker: true still maps to "full", antiFlicker: false maps to "off", and antiFlickerTimeout maps to antiFlickerTimeoutMs.