Loader Panel

👑Pioneer

A universal loading container used to wrap business modules. It not only provides unified visual feedback and interaction blocking for the loading state but also integrates the system's global initialization counting logic for coordinating page-level loading progress statistics.

Changes in the inited state of this component are automatically reported to the portletCounter in the global service. Through this mechanism, developers can control the global loading state of the TuiAdaptive component.

Typical Example: If portletCount of TuiAdaptive is set to 5, then when 5 or more ioaderPanels on the page enter the inited state, TuiAdaptive will automatically determine that global initialization is complete and stop the loading display.

Basic Usage

TuiLoaderPanel is typically used as the root container for cards or modules. Manage the component's lifecycle states by controlling the loading and inited properties.

::: demo A comprehensive demonstration including basic toggling, asynchronous simulation, and opacity configuration. loader-panel/index :::

Note: The above demonstration integrates the core features of TuiLoaderPanel, including click-through protection during loading (pointer-events: none) and the counter response when the inited state changes.

API Reference

Props

Property	Description	Type	Default
loading	Whether it is in a loading state. When true, the content area transparency is reduced, interaction is disabled, and the loading animation is displayed.	Boolean	true
inited	Initialization completion flag. When this value changes from false to true, it triggers an increment in the portletCounter within the global state.	Boolean	false
loadingOpacity	The opacity of the content area in the loading state. Range 0-1; the smaller the value, the more transparent.	Number	0.1

Slots

Slot Name	Description
default	Default slot, used to place specific business component content.

Core Mechanism Description

Interaction Blocking and Visual Feedback

When loading is true, the component automatically applies the following styling behaviors:

• Interaction Blocking: Sets pointer-events: none to prevent users from clicking or interacting with DOM elements that have not finished loading.
• Transparency Processing: The opacity of the content area is set to the value of loadingOpacity (default 0.1) to visually distinguish between "loading" and "available" states.

Global Counter Integration (Portlet Counter)

This component interacts with the $globalState/portletCounter in the system's global state.

• Trigger Timing: Monitors changes to the inited property.
• Execution Logic: Only when inited becomes true, it executes $tState.globalState.portletCounter++. This parameter can be monitored via the $gPortletCounter computed property.
• Use Case: Typically used in Dashboards or complex pages where the parent level monitors the total value of the counter to determine if all sub-modules have finished loading (e.g., Total Modules = 5, wait until Counter === 5 to remove the page-level mask).

Loading Effect Implementation (Component Reuse)

Internally, this component calls the TuiLoadingArea component to achieve the area masking effect.

• Separation of Concerns: TuiLoaderPanel is responsible for container layout, interaction logic (such as pointer-events), and global counter states, while TuiLoadingArea focuses on the visual rendering of the loading animation.
• Prop Pass-through: The component passes the received loading property directly to the internal TuiLoadingArea to ensure visual feedback remains consistent with the logical state.

Internal Dependency

TuiLoaderPanel relies on the TuiLoadingArea component to display the loading animation. Please ensure TuiLoadingArea is registered or referenced in your project before use.