Loading Screen ​

LIQA is designed to have a full user journey encapsulated in a single web component. The loading screen is the first step in the user journey. The loading screen is displayed for the end-user during 2 consequent processes:

1. LIQA resources are being loaded
2. LIQA AI is being initialized

Use the guide below to understand and customize this part of the user flow. If the default integration is left unchanged, the default option will be used. See all available options below.

Display Loading Screen default ​

Simply insert the <hautai-liqa> tag into the markup of your application.

How it works ​

Once the <hautai-liqa> tag is inserted into the markup of your application, LIQA starts the user session immediately. At this moment:

1. The user immediately receives a request for the camera access.
2. The user immediately sees the LIQA loading screen.

Additional guidance ​

The time that the loading screen is displayed depends on the user's device computational power and the network speed. If you find the time that the loading screen is displayed as too long, please, consider the following options:

• Check that the exact device meets the system requirements.
• Consider the option for preloading LIQA resources in advance.
• Consider the option for skipping the loading screen and displaying some educational/engaging content until LIQA is ready to operate.

Skip Loading Screen ​

1. Insert the <hautai-liqa> tag into the markup of your application and pass the hidden attribute to the <hautai-liqa> tag:

tsx
<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI" 
  hidden
>
</hautai-liqa>

tsx
<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI" 
  hidden
>
</hautai-liqa>

tsx
export function App() {
  const [isLiqaHidden, setIsLiqaHidden] = React.useState(true)
 
  return <hautai-liqa
    license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
    hidden={isLiqaHidden}
  ></hautai-liqa>
}

tsx
export function App() {
  const [isLiqaHidden, setIsLiqaHidden] = React.useState(true)
 
  return <hautai-liqa
    license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
    hidden={isLiqaHidden}
  ></hautai-liqa>
}

<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  :hidden="isLiqaHidden"
></hautai-liqa>

<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  :hidden="isLiqaHidden"
></hautai-liqa>

<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  [hidden]="isLiqaHidden"
></hautai-liqa>

<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  [hidden]="isLiqaHidden"
></hautai-liqa>

<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  hidden={isLiqaHidden}
></hautai-liqa>

<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  hidden={isLiqaHidden}
></hautai-liqa>

2. Subscribe to the "ready" event to receive a notification when LIQA loading and initialization processes are finished in the background and LIQA is ready to start the user interaction session:

js
const liqa = document.querySelector("hautai-liqa")
 
liqa.addEventListener("ready", handleLiqaReady)

js
const liqa = document.querySelector("hautai-liqa")
 
liqa.addEventListener("ready", handleLiqaReady)

tsx
export function App() {
  const ref = React.useRef()
  const [isLiqaReady, setIsLiqaReady] = React.useState(false)
 
  React.useEffect(() => {
    ref.current.addEventListener("ready", handleLiqaReady)
 
    return () => ref.current.removeEventListener("ready", handleLiqaReady)
  })
 
  return (
    <hautai-liqa
      ref={ref}
      license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
      hidden={!isLiqaReady}
    ></hautai-liqa>
  )
}

tsx
export function App() {
  const ref = React.useRef()
  const [isLiqaReady, setIsLiqaReady] = React.useState(false)
 
  React.useEffect(() => {
    ref.current.addEventListener("ready", handleLiqaReady)
 
    return () => ref.current.removeEventListener("ready", handleLiqaReady)
  })
 
  return (
    <hautai-liqa
      ref={ref}
      license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
      hidden={!isLiqaReady}
    ></hautai-liqa>
  )
}

<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  @ready="handleLiqaReady"
  :hidden="!isLiqaReady"
></hautai-liqa>

<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  @ready="handleLiqaReady"
  :hidden="!isLiqaReady"
></hautai-liqa>

<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  (ready)="handleLiqaReady()"
  [hidden]="!isLiqaReady"
></hautai-liqa>

<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  (ready)="handleLiqaReady()"
  [hidden]="!isLiqaReady"
></hautai-liqa>

<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  on:ready="{handleLiqaReady}"
  hidden={!isLiqaReady}
></hautai-liqa>

<hautai-liqa
  license="LICENSE_KEY_PROVIDED_BY_HAUT.AI"
  on:ready="{handleLiqaReady}"
  hidden={!isLiqaReady}
></hautai-liqa>

3. Remove the hidden attribute from the <hautai-liqa> tag once LIQA is indicated that it is ready to start the session.

How it works ​

As for other components, the "hidden" attribute in the LIQA tag indicates that the browser should not render the contents of the element. However, it does not affect the loading of LIQA resources and the initialization of LIQA AI.

1. Being hidden, LIQA continues to load the resources and initialize the AI in the background.
2. Being hidden, LIQA does not display the loading screen to the user.
3. Being hidden, LIQA does not request camera access from the user and waits for the hidden attribute to be removed.
4. Once the hidden attribute is removed, LIQA starts the user session immediately as in the default integration.