StringLoading Module

Gate page reveals behind a single flag. StringLoading waits for the configured delay and then appends -loaded to the root <html> element so your CSS transitions know when to fire.

Module Snapshot

Activation: register via stringTune.use(StringLoading, settings?); no DOM attribute required
Scope: runs once during module onInit, independent of tracked objects
Output: adds the -loaded class to document.documentElement; no CSS variables are written
Timing control: uses settings.timeout (milliseconds), defaulting to the next animation frame when omitted
Common pairing: combine with a pre-set -ready class to stage fonts/assets before revealing the interface

Settings

Setting	Type	Default	Description
`timeout`	number	`0`	Delay before `-loaded` is appended. Provide in milliseconds for longer hold-offs.

Basic Usage

import StringTune, { StringLoading } from '@fiddle-digital/string-tune';

const stringTune = StringTune.getInstance();
stringTune.use(StringLoading, { timeout: 600 });
stringTune.start(60);

html {
  opacity: 0;
  transition: opacity 320ms ease;
}

html.-loaded {
  opacity: 1;
}

How It Works

Initialization hook: during onInit, the module reads settings.timeout and schedules a single setTimeout.
Class toggle: when the timer elapses, document.documentElement.classList.add('-loaded') executes exactly once.
Zero-delay behavior: omitting the setting defers the class addition to the next macrotask, allowing any synchronous setup to finish.
Teardown safe: there are no listeners or repeated timers; destroying StringTune simply leaves the class in place.

Event Signal

This module does not emit custom events—listen for the DOM class change if additional coordination is required.

StringLoading is the lightweight handshake between initialization scripts and your reveal animations—set the delay you need, toggle styles off the shared class, and keep the rest of the stack focused on interaction.