fix: no transition on loader

Author: vis97c

packages/components-vue/src/components/loader/Content.vue

@@ -1,57 +1,53 @@
 <template>
-	<BaseWrapper :wrapper="Transition" :wrap="!unwrap" name="fade" appear>
-		<div
-			v-if="!content || (errors && !ignoreErrors)"
-			class="flx --flxColumn --flx-center --width-100"
-			:class="loaderClasses"
-		>
-			<!-- first load -->
-			<template v-if="!loading">
-				<BoxMessage v-if="errors" :theme="eColors.DANGER" class="--width-100">
-					<div class="flx --flxRow --flx-center">
-						<span>{{ t("could_not_get_data") }}</span>
-						<ActionButtonToggle
-							v-if="refresh"
-							:theme="eColors.DANGER"
-							:tooltip="t('refresh')"
-							round
-							@click="refresh()"
-						>
-							<IconFa name="rotate-right" />
-							<IconFa name="rotate-right" regular />
-						</ActionButtonToggle>
-					</div>
-				</BoxMessage>
-				<BoxMessage v-else :theme="theme" class="--width-100">
-					<div class="flx --flxRow --flx-center">
-						<span>{{ noContentMessage || t("nothing_to_show") }}</span>
-						<ActionButtonToggle
-							v-if="refresh"
-							:theme="theme"
-							:tooltip="t('refresh')"
-							round
-							@click="refresh()"
-						>
-							<IconFa name="rotate-right" />
-							<IconFa name="rotate-right" regular />
-						</ActionButtonToggle>
-					</div>
-				</BoxMessage>
-			</template>
-			<LoaderSimple v-else-if="!noLoader" :label="label" :theme="theme" />
+	<div
+		v-if="!content || (errors && !ignoreErrors)"
+		class="flx --flxColumn --flx-center --width-100"
+		:class="loaderClasses"
+	>
+		<!-- first load -->
+		<template v-if="!loading">
+			<BoxMessage v-if="errors" :theme="eColors.DANGER" class="--width-100">
+				<div class="flx --flxRow --flx-center">
+					<span>{{ t("could_not_get_data") }}</span>
+					<ActionButtonToggle
+						v-if="refresh"
+						:theme="eColors.DANGER"
+						:tooltip="t('refresh')"
+						round
+						@click="refresh()"
+					>
+						<IconFa name="rotate-right" />
+						<IconFa name="rotate-right" regular />
+					</ActionButtonToggle>
+				</div>
+			</BoxMessage>
+			<BoxMessage v-else :theme="theme" class="--width-100">
+				<div class="flx --flxRow --flx-center">
+					<span>{{ noContentMessage || t("nothing_to_show") }}</span>
+					<ActionButtonToggle
+						v-if="refresh"
+						:theme="theme"
+						:tooltip="t('refresh')"
+						round
+						@click="refresh()"
+					>
+						<IconFa name="rotate-right" />
+						<IconFa name="rotate-right" regular />
+					</ActionButtonToggle>
+				</div>
+			</BoxMessage>
+		</template>
+		<LoaderSimple v-else-if="!noLoader" key="loader-no-content" :label="label" :theme="theme" />
+	</div>
+	<BaseWrapper v-else :wrap="!unwrap" :el="el" v-bind="$attrs">
+		<div class="back --overlay" :class="{ 'is--active': loading && !noLoader }">
+			<LoaderSimple key="loader-content" :label="label" :theme="theme" />
 		</div>
-		<BaseWrapper v-else :wrap="!unwrap" :el="el" v-bind="$attrs">
-			<div class="back --overlay" :class="{ 'is--active': loading && !noLoader }">
-				<LoaderSimple :label="label" :theme="theme" />
-			</div>
-			<slot></slot>
-		</BaseWrapper>
+		<slot></slot>
 	</BaseWrapper>
 </template>
 
 <script setup lang="ts">
-	import { Transition } from "vue";
-
 	import type { tProps } from "@open-xamu-co/ui-common-types";
 	import { useI18n } from "@open-xamu-co/ui-common-helpers";
 	import { eColors } from "@open-xamu-co/ui-common-enums";