Loading icon remains visible after promise resolution when using the loading-icon slot

[pcoterecollective]

Type

• Bug

Description

Loading icon remains visible after promise resolution when using the loading-icon slot

Expected result

Loading icon should disappear on promise resolution when using the loading-icon slot

Context

• "vue-sonner": "^1.3.0"
• "vite": "^6.0.7"
• "vue": "^3.5.13"
• "tailwindcss": "^3.4.17"
• "lucide-vue-next": "^0.475.0"

Steps to reproduce

Create this simple Vue 3 app and click on the button

<script setup lang="ts">
// App.vue
import { Toaster, toast } from 'vue-sonner'
import { Loader } from 'lucide-vue-next'

const onClick = () => {
  toast.promise(() => new Promise((r) => setTimeout(r, 2000)), {
    loading: 'Loading...',
    success: () => 'Success',
    error: () => 'Error'
  })
}
</script>

<template>
  <div class="flex items-center justify-center h-screen w-screen">
    <Toaster class="toaster group" v-bind="props">
      <template #loading-icon>
        <Loader />
      </template>
    </Toaster>

    <button @click="onClick">Click me!</button>
  </div>
</template>

[dany68]

Hi,
I confirm experiencing the same issue.

[pcoterecollective]

Fix:

Replace the following lines

vue-sonner/src/packages/Toast.vue

Lines 77 to 91 in ada95d7

	<div data-icon="" :class="cn(classes?.icon, toast?.classes?.icon)">
	<template
	v-if="(toast.promise || toastType === 'loading') && !toast.icon"
	>
	<slot name="loading-icon" />
	</template>
	<component :is="toast.icon" v-if="toast.icon" />
	<template v-else>
	<slot v-if="toastType === 'success'" name="success-icon" />
	<slot v-else-if="toastType === 'error'" name="error-icon" />
	<slot v-else-if="toastType === 'warning'" name="warning-icon" />
	<slot v-else-if="toastType === 'info'" name="info-icon" />
	</template>

with

          <component :is="toast.icon" v-if="toast.icon" />
          <template v-else>
            <slot v-if="toastType === 'loading'" name="loading-icon" />
            <slot v-else-if="toastType === 'success'" name="success-icon" />
            <slot v-else-if="toastType === 'error'" name="error-icon" />
            <slot v-else-if="toastType === 'warning'" name="warning-icon" />
            <slot v-else-if="toastType === 'info'" name="info-icon" />
          </template>

[xiaoluoboding]

@pcoterecollective Hi there, thanks for the fix! Please create a pull request so we can merge it.

[pcoterecollective]

@xiaoluoboding
ERROR: Permission to xiaoluoboding/vue-sonner.git denied to ...