# Placeholder component

Base library 2.11.2 And above version support, 2.11.2 The following and unconfigured have the same effect

In the use of such Subcontract asynchrony or [Time injection]((framework/ability/lazyload#Time injection)) Other custom components referenced by the custom component may be unavailable at the beginning of rendering. At this point, in order for the rendering process not to be blocked, the unusable custom component needs a __Placeholder component（Component placeholder __The base library renders a placeholder instead of an unavailable component, and then replaces the placeholder back to the component when it is available.

The placeholder for a custom component can be another custom component or a built-in component.

# To configure

Corresponding to the page or custom component JSON In the configuration componentPlaceholder Field is used to specify a placeholder component, such as:

{
  "usingComponents": {
    "comp-a": "../comp/compA",
    "comp-b": "../comp/compB",
    "comp-c": "../comp/compC"
  },
  "componentPlaceholder":  {
    "comp-a": "view",
    "comp-b": "comp-c"
  }
}

This configuration represents:

• assembly comp-a The placeholder component of the view
• assembly comp-b The placeholder component for the custom component comp-c(Its path is in usingComponents In the configuration)

Suppose the template corresponding to this configuration is as follows:

<button ontap="onTap" >Display Components</button>
<comp-a wx-if="{{ visible }}">
  <comp-b prop=  p }}">text in slot</comp-b>
</comp-a>

When the Mini Program starts visible for false, then only button Will be rendered.After clicking the button,this.setData({ visible: true }) Is executed, at this time if the comp-a, comp-b Are not available, the page will be rendered as:

<button>Display Components</button>
<view>
  <comp-c prop=  p }}">text in slot</comp-c>
</view>

comp-a and comp-b When the preparation is complete, the page is replaced with:

<button>Display Components</button>
<comp-a>
  <comp-b prop=  p }}">text in slot</comp-b>
</comp-a>

# Note

1. When a component is specified as a placeholder component (the comp-c) for which a placeholder component is specified is not valid. It can be understood that if a component needs to be a placeholder for other components, it must be available in the first place.
2. Cases where custom components are currently unavailable include:
   • With the subcontract asynchronization feature, components of other sub-packages are referenced, and the subcontract has not yet been downloaded
   • With the time injection feature, the component has not been injected
3. If a component is not available and its placeholder component does not exist, an error is reported and thrown when rendering
4. If a component does not exist, but an available placeholder is specified for it, the placeholder can be rendered normally, but subsequent attempts to prepare for replacement will result in an error and a throw.

# Additional: Rendering process with placeholder components

When the base library attempts to render a component, it first recursively checks usingComponentsCollects information about all the components it will useDuring this process, if a used component is not available, the base library first checks whether it has a corresponding placeholder component. If not, the base library breaks rendering and throws an errorIf so, the unavailable component is marked and rendered with a placeholder component in the subsequent rendering process. Components that are not available will attempt to prepare (download sub-packages, inject code, etc.) after the end of the current rendering process.Wait until the preparation process is complete, and then try to render the component (which is actually executing the process), and replace the placeholder component that was rendered earlier.