\n \u003CUButton\n label=\"Delete\"\n color=\"error\"\n variant=\"solid\"\n loading-auto\n :loading=\"loading\"\n size=\"md\"\n @click=\"emit('close', true)\"\n />\n \u003C/div>\n \u003C/template>\n \u003C/UModal>\n\u003C/template>\n```\n\n### NotesListModal.vue\n\n```\n\u003Cscript setup lang=\"ts\">\nimport { UserModalsNoteFormModal as NoteFormModal, DeleteModal } from '#components'\n\nconst overlay = useOverlay()\n\nconst { getUserNotes } = useGetRequest()\nconst { deleteNote } = useDeleteRequest()\nconst { user, UserNotes } = storeToRefs(useUserStore())\n\nconst isLoading = ref(false)\nconst isDeleting = ref(false)\n\nasync function openDeleteModal(id: number) {\n const instance = overlay.create(DeleteModal).open({\n title: 'Delete this note',\n description: 'Are you sure, this action cannot be undone.',\n })\n\n const confirm = await instance.result\n\n if (confirm) {\n await handleDelete(id)\n }\n}\n\nasync function handleDelete(id: number) {\n isDeleting.value = true\n try {\n const response = await deleteNote(id)\n if (response.status_code !== 200) return\n const index = UserNotes.value.findIndex(note => note.id === id)\n if (index !== -1) UserNotes.value?.splice(index, 1)\n } catch (error) {\n console.error('Error:', error)\n } finally {\n isDeleting.value = false\n }\n}\n\nonMounted(async () => {\n if (user.value?.id) {\n isLoading.value = true\n try {\n const response = await getUserNotes(user.value.id)\n if (response.status_code !== 200) return\n UserNotes.value = response.data.data\n } catch (err) {\n console.error(err)\n } finally {\n isLoading.value = false\n }\n }\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUModal :dismissible=\"false\" title=\"Show all notes\">\n \u003Ctemplate #body>\n \u003Cdiv v-if=\"isLoading\" class=\"flex justify-center\">\n \u003CUIcon name=\"i-lucide:loader-circle\" class=\"size-8 animate-spin\" />\n \u003C/div>\n \u003Cdiv v-else class=\"flex flex-col space-y-3\">\n \u003Cdiv v-for=\"note in UserNotes\" :key=\"`note-${note.id}`\" class=\"p-2.5 bg-[var(--ui-bg-elevated)]\">\n \u003Cp class=\"text-highlighted ltr:first-letter:uppercase\">\n {{ note.title }}\n \u003C/p>\n \u003Cspan class=\"text-sm text-muted inline-block ltr:first-letter:uppercase\">{{ note.body }}\u003C/span>\n \u003Cdiv class=\"flex items-center justify-between space-x-3\">\n \u003Cspan class=\"text-sm text-highlighted font-light inline-block\">{{ note.created_at?.split('T')[0] }}\u003C/span>\n \u003Cdiv class=\"flex items-center\">\n \u003CUButton icon=\"i-lucide:edit\" variant=\"link\" size=\"md\" @click=\"overlay.create(NoteFormModal).open({ mode: 'edit', noteId: note.id })\" />\n \u003CUButton icon=\"i-lucide:trash-2\" color=\"error\" variant=\"link\" size=\"md\" @click=\"openDeleteModal(note.id)\" />\n \u003C/div>\n \u003C/div>\n \u003C/div>\n \u003C/div>\n \u003C/template>\n \u003Ctemplate #footer>\n \u003CUButton\n label=\"Add new note\"\n icon=\"i-lucide-plus\"\n color=\"neutral\"\n variant=\"outline\"\n block\n @click=\"overlay.create(NoteFormModal).open({ mode: 'create' })\"\n />\n \u003C/template>\n \u003C/UModal>\n\u003C/template>\n```",[2950,2951],{"name":2912,"color":2913},{"name":2871,"color":2872},4249,"Show loading on delete button and close modal after deletion finishes","2025-06-01T12:38:39Z","https://github.com/nuxt/ui/issues/4249",0.7541491,{"labels":2958,"number":2962,"owner":2877,"repository":2877,"state":2918,"title":2963,"updated_at":2964,"url":2965,"score":2966},[2959],{"name":2960,"color":2961},"2.x","d4c5f9",7387,"mounted hook called twice when using component in page","2023-01-18T15:36:09Z","https://github.com/nuxt/nuxt/issues/7387",0.75538546,{"labels":2968,"number":2970,"owner":2877,"repository":2877,"state":2918,"title":2971,"updated_at":2972,"url":2973,"score":2974},[2969],{"name":2960,"color":2961},3662,"Use lru-cache to save nuxt.render() result?","2023-01-18T16:26:27Z","https://github.com/nuxt/nuxt/issues/3662",0.7558654,{"description":2976,"labels":2977,"number":2980,"owner":2877,"repository":2878,"state":2918,"title":2981,"updated_at":2982,"url":2983,"score":2984},"### Description\n\nI was experimenting with two `UBadge` components and `rounded-e-full`/`rounded-s-full` to achieve a `UButtonGroup` effect, would a `UBagdeGroup` component be to much to ask? :)",[2978,2979],{"name":2868,"color":2869},{"name":2871,"color":2872},3156,"BadgeGroups!","2025-03-08T12:22:25Z","https://github.com/nuxt/ui/issues/3156",0.7610549,["Reactive",2986],{},["Set"],["ShallowReactive",2989],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$ftRgUpy4Xzt7BQgelCN8nuy0wPT09NLhez-GnX12vnGY":-1},"/nuxt/ui/4001"]