Advanced
All parameters
Render parameters
Useskeleton

useskeleton

Type: boolean
Default: false
Context: prediction

About this parameter

Shows a placeholder (skeleton) in the container while the recommendations are loading. The space the recommendations need is reserved in advance, so the page does not jump when the links appear. This reduces layout shift (CLS).

The skeleton is removed as soon as the recommendations are rendered. If nothing is rendered, for example if the request fails, it is removed after 4 seconds.

Appearance

The shape of the skeleton follows renderstyle:

renderstyleSkeleton
Default (list)One text bar per row
pillsRounded pills, as many per row as fit the container width
advancedOne solid block with rounded corners

The height is estimated from nrofhits (10 if not set) and the width of the container. For advanced, cols and showimage are also used.

The skeleton is drawn in the text color of the container with low opacity, so it works on both light and dark backgrounds. The pulse animation is turned off for visitors who have chosen reduced motion in their system settings.

When no skeleton is shown

  • The container already has content.
  • The container is hidden, for example with display: none or in a closed tab.
  • renderstyle is sort or searchresult.
  • A callback is used, since the rendering is then done by your own code.
  • onlyprojectid does not match the current project.

If rek.ai's CSS is not added to the page, the space is still reserved, but no placeholder is visible.

Usage examples

<div class="rek-prediction" data-useskeleton="true"></div>

With pills:

<div class="rek-prediction" data-useskeleton="true" data-renderstyle="pills" data-nrofhits="8"></div>
Useh1forcontentAdvanced parameters