# Lazy loading translation

If you are developing a large app, you can consider using lazy loading translation: translations that are lazy loaded only when requested (when the user navigates to a specific section or page of the app):

{% @mermaid/diagram content="C4Container
Container\_Boundary(a, "App") {
Component(a0, "root", "useQwikSpeak", "Translations available in the whole app")
Container\_Boundary(b1, "Site") {
Component(b10, "Page", "useSpeak", "Translations available in Page component")

```
}  
Container_Boundary(b2, "Admin") {
  Component(b20, "layout", "useSpeak", "Translations available in child components")        
}
```

}" %}

For lazy loading of files in a specific section, you need to add `useSpeak` to the layout:

```tsx
import { useSpeak } from 'qwik-speak';

export default component$(() => {
  useSpeak({assets:['admin'], runtimeAssets: ['runtimeAdmin']});
  
  return (
    <>
      <main>
        <Slot />
      </main>
    </>
  );
});
```

or in a specific page:

```tsx
export default component$(() => {
  useSpeak({runtimeAssets: ['runtimePage']});

  return <Page />;
});
```

> Note that you must create a component for the page, because Qwik renders components in isolation, and translations are only available in child components


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://robisim74.gitbook.io/qwik-speak/library/lazy-loading.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
