loading

You can set loading to true when you're lazy loading some items. For example, the code below is a simple example of how you can use loading to show a loading indicator while you're fetching items from an API.

html

<template>
  <VueQuickActions
    :items="items"
    :loading="loading"
    @search="handleSearch"
  />
</template>

<script setup lang="ts">
	import { ref } from "vue";

	import { VueQuickActions, Item } from 'vue-quick-actions';
	import "vue-quick-actions/dist/style.css";

	const loading = ref(false);

	const items = ref<Item[]>([
		{
			key: 'console-write', // Key should be unique
			label: "Log 'hey' to console",
			onSelect() {
				console.log('hey');
			}
		}
	])

	const handleSearch = (query: string) => {
		loading.value = true;

		try {
			const response = await fetch('https://api.example.com/search'); 
			const jsonResponse = await response.json();

			items.value = jsonResponse.items;
		} catch (e) {
			// Handle error
		} finally {
			loading.value = false
		}
	};
</script>

loading ​

loading