fix(VCard): keep loader color when fading out

fixes #22290

Author: J-Sek

packages/vuetify/src/components/VCard/VCard.tsx

@@ -30,6 +30,7 @@ import { genOverlays, makeVariantProps, useVariant } from '@/composables/variant
 import vRipple from '@/directives/ripple'
 
 // Utilities
+import { shallowRef, watch } from 'vue'
 import { genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
@@ -111,6 +112,15 @@ export const VCard = genericComponent<VCardSlots>()({
     const { positionClasses } = usePosition(props)
     const { roundedClasses } = useRounded(props)
     const link = useLink(props, attrs)
+    const loadingColor = shallowRef<string | undefined>(undefined)
+
+    watch(() => props.loading, (val, old) => {
+      loadingColor.value = !val && typeof old === 'string'
+        ? old
+        : typeof val === 'boolean'
+          ? undefined
+          : val
+    }, { immediate: true })
 
     useRender(() => {
       const isLink = props.link !== false && link.isLink.value
@@ -188,7 +198,7 @@ export const VCard = genericComponent<VCardSlots>()({
           <LoaderSlot
             name="v-card"
             active={ !!props.loading }
-            color={ typeof props.loading === 'boolean' ? undefined : props.loading }
+            color={ loadingColor.value }
             v-slots={{ default: slots.loader }}
           />