> ## Documentation Index
> Fetch the complete documentation index at: https://inertiajs-vi.tuantq.online/llms.txt
> Use this file to discover all available pages before exploring further.

# Tải khi hiển thị

Inertia hỗ trợ lazy-load dữ liệu khi cuộn bằng Intersection Observer API. Framework cung cấp component `WhenVisible` như một cách thuận tiện để tải dữ liệu khi một phần tử xuất hiện trong viewport.

Component `WhenVisible` nhận prop `data` để chỉ định key của prop cần tải. Component cũng nhận prop `fallback` để chỉ định component được render trong lúc dữ liệu đang tải. `WhenVisible` nên bao bọc component phụ thuộc vào dữ liệu đó.

<CodeGroup>
  ```vue Vue icon="vuejs" theme={null}
  <script setup>
  import { WhenVisible } from "@inertiajs/vue3";
  </script>

  <template>
    <WhenVisible data="permissions">
      <template #fallback>
        <div>Loading...</div>
      </template>

      <div v-for="permission in permissions">
        <!-- ... -->
      </div>
    </WhenVisible>
  </template>
  ```

  ```jsx React icon="react" theme={null}
  import { WhenVisible } from "@inertiajs/react";

  export default () => (
    <WhenVisible data="permissions" fallback={() => <div>Loading...</div>}>
      <PermissionsChildComponent />
    </WhenVisible>
  );
  ```

  ```svelte Svelte icon="s" theme={null}
  <script>
      import { WhenVisible } from '@inertiajs/svelte'

      let { permissions } = $props()
  </script>

  <WhenVisible data="permissions">
      {#snippet fallback()}
          <div>Loading...</div>
      {/snippet}

      {#each permissions as permission}
          <!-- ... -->
      {/each}
  </WhenVisible>
  ```
</CodeGroup>

Nếu muốn tải nhiều prop khi một phần tử trở nên hiển thị, bạn có thể truyền một mảng vào prop `data`.

<CodeGroup>
  ```vue Vue icon="vuejs" theme={null}
  <script setup>
  import { WhenVisible } from "@inertiajs/vue3";
  </script>

  <template>
    <WhenVisible :data="['teams', 'users']">
      <template #fallback>
        <div>Loading...</div>
      </template>

      <!-- Props are now loaded -->
    </WhenVisible>
  </template>
  ```

  ```jsx React icon="react" theme={null}
  import { WhenVisible } from "@inertiajs/react";

  export default () => (
    <WhenVisible data={["teams", "users"]} fallback={() => <div>Loading...</div>}>
      <ChildComponent />
    </WhenVisible>
  );
  ```

  ```svelte Svelte icon="s" theme={null}
  <script>
      import { WhenVisible } from '@inertiajs/svelte'

      let { teams, users } = $props()
  </script>

  <WhenVisible data={['teams', 'users']}>
      {#snippet fallback()}
          <div>Loading...</div>
      {/snippet}

      <!-- Props are now loaded -->
  </WhenVisible>
  ```
</CodeGroup>

## Tải trước khi phần tử hiển thị

Nếu muốn bắt đầu tải dữ liệu trước khi phần tử thực sự hiển thị, bạn có thể truyền giá trị cho prop `buffer`. Giá trị buffer là số pixel tính từ thời điểm trước khi phần tử đi vào viewport.

<CodeGroup>
  ```vue Vue icon="vuejs" theme={null}
  <script setup>
  import { WhenVisible } from "@inertiajs/vue3";
  </script>

  <template>
    <WhenVisible data="permissions" :buffer="500">
      <template #fallback>
        <div>Loading...</div>
      </template>

      <div v-for="permission in permissions">
        <!-- ... -->
      </div>
    </WhenVisible>
  </template>
  ```

  ```jsx React icon="react" theme={null}
  import { WhenVisible } from "@inertiajs/react";

  export default () => (
    <WhenVisible
      data="permissions"
      buffer={500}
      fallback={() => <div>Loading...</div>}
    >
      <PermissionsChildComponent />
    </WhenVisible>
  );
  ```

  ```svelte Svelte icon="s" theme={null}
  <script>
      import { WhenVisible } from '@inertiajs/svelte'

      let { permissions } = $props()
  </script>

  <WhenVisible data="permissions" buffer={500}>
      {#snippet fallback()}
          <div>Loading...</div>
      {/snippet}

      {#each permissions as permission}
          <!-- ... -->
      {/each}
  </WhenVisible>
  ```
</CodeGroup>

Trong ví dụ trên, dữ liệu sẽ bắt đầu được tải khi phần tử còn cách thời điểm hiển thị 500 pixel.

Mặc định, component `WhenVisible` bao bọc fallback template bằng phần tử `div` để có thể xác định phần tử có hiển thị trong viewport hay không. Nếu muốn tùy chỉnh phần tử bao bọc, hãy truyền prop `as`.

<CodeGroup>
  ```vue Vue icon="vuejs" theme={null}
  <script setup>
  import { WhenVisible } from "@inertiajs/vue3";
  </script>

  <template>
    <WhenVisible data="products" as="span">
      <!-- ... -->
    </WhenVisible>
  </template>
  ```

  ```jsx React icon="react" theme={null}
  import { WhenVisible } from "@inertiajs/react";

  export default () => (
    <WhenVisible data="products" as="span">
      <ProductsChildComponent />
    </WhenVisible>
  );
  ```

  ```svelte Svelte icon="s" theme={null}
  <script>
      import { WhenVisible } from '@inertiajs/svelte'

      let { products } = $props()
  </script>

  <WhenVisible data="products" as="span">
      <!-- ... -->
  </WhenVisible>
  ```
</CodeGroup>

## Luôn kích hoạt

Mặc định, component `WhenVisible` chỉ kích hoạt một lần khi element trở nên hiển thị. Nếu muốn luôn kích hoạt tải dữ liệu khi element hiển thị, bạn có thể truyền prop `always`.

Điều này hữu ích khi muốn tải dữ liệu mỗi lần element hiển thị, chẳng hạn element ở cuối infinite scroll list và bạn muốn tải thêm. Ngoài ra có thể dùng component [Infinite scroll](/v3/data-props/infinite-scroll), vốn xử lý sẵn trường hợp này.

Lưu ý rằng nếu request tải dữ liệu vẫn đang được xử lý, component sẽ đợi request đó hoàn tất rồi mới bắt đầu request tiếp theo nếu phần tử vẫn còn hiển thị trong viewport.

<CodeGroup>
  ```vue Vue icon="vuejs" theme={null}
  <script setup>
  import { WhenVisible } from "@inertiajs/vue3";
  </script>

  <template>
    <WhenVisible data="products" always>
      <!-- ... -->
    </WhenVisible>
  </template>
  ```

  ```jsx React icon="react" theme={null}
  import { WhenVisible } from "@inertiajs/react";

  export default () => (
    <WhenVisible data="products" always>
      <ProductsChildComponent />
    </WhenVisible>
  );
  ```

  ```svelte Svelte icon="s" theme={null}
  <script>
      import { WhenVisible } from '@inertiajs/svelte'

      let { products } = $props()
  </script>

  <WhenVisible data="products" always>
      <!-- ... -->
  </WhenVisible>
  ```
</CodeGroup>

### Trạng thái fetching

Component `WhenVisible` cung cấp slot prop `fetching` để bạn hiển thị chỉ báo đang tải trong các request tiếp theo. Điều này hữu ích vì `fallback` chỉ được hiển thị ở lần tải đầu tiên, còn `fetching` cho phép cho biết dữ liệu đang được làm mới ở những lần tải sau.

<CodeGroup>
  ```vue Vue icon="vuejs" theme={null}
  <script setup>
  import { WhenVisible } from "@inertiajs/vue3";
  </script>

  <template>
    <WhenVisible data="permissions" always>
      <template #default="{ fetching }">
        <PermissionsChildComponent />
        <div v-if="fetching">Refreshing...</div>
      </template>

      <template #fallback>
        <div>Loading...</div>
      </template>
    </WhenVisible>
  </template>
  ```

  ```jsx React icon="react" theme={null}
  import { WhenVisible } from "@inertiajs/react";

  export default () => (
    <WhenVisible data="permissions" always fallback={() => <div>Loading...</div>}>
      {({ fetching }) => (
        <>
          <PermissionsChildComponent />
          {fetching && <div>Refreshing...</div>}
        </>
      )}
    </WhenVisible>
  );
  ```

  ```svelte Svelte icon="s" theme={null}
  <script>
      import { WhenVisible } from '@inertiajs/svelte'

      let { permissions } = $props()
  </script>

  <WhenVisible data="permissions" always>
      {#snippet children({ fetching })}
          <PermissionsChildComponent />
          {#if fetching}
              <div>Refreshing...</div>
          {/if}
      {/snippet}

      {#snippet fallback()}
          <div>Loading...</div>
      {/snippet}
  </WhenVisible>
  ```
</CodeGroup>

## Giữ lỗi

Component `WhenVisible` mặc định đặt `preserveErrors: true`, đảm bảo validation error không bị xóa khi nó kích hoạt reload. Bạn có thể override qua prop `params`.

<CodeGroup>
  ```vue Vue icon="vuejs" theme={null}
  <WhenVisible data="comments" :params="{ preserveErrors: false }">
      <!-- ... -->
  </WhenVisible>
  ```

  ```jsx React icon="react" theme={null}
  <WhenVisible data="comments" params={{ preserveErrors: false }}>
      {/* ... */}
  </WhenVisible>
  ```

  ```svelte Svelte icon="s" theme={null}
  <WhenVisible data="comments" params={{ preserveErrors: false }}>
      <!-- ... -->
  </WhenVisible>
  ```
</CodeGroup>

## Gửi form

Khi gửi form, bạn có thể muốn dùng tùy chọn `except` để loại trừ các prop đang được component `WhenVisible` sử dụng. Cách này tránh việc các prop bị tải lại khi bạn được redirect trở về trang hiện tại do lỗi validation.

<CodeGroup>
  ```vue Vue icon="vuejs" theme={null}
  <script setup>
  import { useForm, WhenVisible } from "@inertiajs/vue3";

  const form = useForm({
    name: "",
    email: "",
  });

  function submit() {
    form.post("/users", {
      except: ["permissions"],
    });
  }
  </script>

  <template>
    <form @submit.prevent="submit">
      <!-- ... -->
    </form>

    <WhenVisible data="permissions">
      <!-- ... -->
    </WhenVisible>
  </template>
  ```

  ```jsx React icon="react" theme={null}
  import { useForm, WhenVisible } from "@inertiajs/react";

  export default function CreateUser() {
    const { data, setData, post } = useForm({
      name: "",
      email: "",
    });

    function submit(e) {
      e.preventDefault();
      post("/users", {
        except: ["permissions"],
      });
    }

    return (
      <>
        <form onSubmit={submit}>{/* ... */}</form>

        <WhenVisible data="permissions">{/* ... */}</WhenVisible>
      </>
    );
  }
  ```

  ```svelte Svelte icon="s" theme={null}
  <script>
      import { useForm, WhenVisible } from '@inertiajs/svelte'

      const form = useForm({
          name: '',
          email: '',
      })

      function submit() {
          form.post('/users', {
              except: ['permissions'],
          })
      }
  </script>

  <form onsubmit={submit}>
      <!-- ... -->
  </form>

  <WhenVisible data="permissions">
      <!-- ... -->
  </WhenVisible>
  ```
</CodeGroup>

***

## Tài liệu chính thức

Bài dịch này được đối chiếu từ [tài liệu Inertia.js v3 chính thức](https://inertiajs.com/docs/v3/data-props/load-when-visible). Nếu có khác biệt do phiên bản hoặc cập nhật mới, hãy ưu tiên tài liệu chính thức làm nguồn tham chiếu.