Updating table loader height issue after Vuetify 3.3.3 released fixed a loading height issue

Author: webdevnerdstuff

src/plugin/components/TableLoader.vue

@@ -1,13 +1,16 @@
 <template>
-	<tr class="v-drilldown-table--loader-tr text-center ma-0 pa-0">
+	<tr
+		:class="loaderContainerClasses"
+		:style="loaderTrStyles"
+	>
 		<td
 			class="px-0 ma-0"
 			:colspan="colspan"
-			:style="loaderTrStyles"
+			:style="loaderTdStyles"
 		>
 			<v-row
 				v-if="loading"
-				:class="loaderContainerClasses"
+				:class="loaderVRowClasses"
 				no-gutters
 			>
 				<v-col
@@ -61,10 +64,16 @@
 </template>
 
 <script setup lang="ts">
-import { componentName } from '@/plugin/utils/globals';
-import { useGetLevelColors } from '@/plugin/composables/levelColors';
 import { TableLoader } from '@/types';
-import { useIsOnlyLinearLoader, useLoaderHeight } from '@/plugin/composables/helpers';
+import {
+	useIsOnlyLinearLoader,
+	useLoaderContainerClasses,
+	useLoaderHeight,
+	useLoaderTdStyles,
+	useLoaderTrStyles,
+	useLoaderVRowClasses,
+} from '@/plugin/composables/loader';
+import { useGetLevelColors } from '@/plugin/composables/levelColors';
 
 
 const theme = useTheme();
@@ -90,30 +99,18 @@ const baseColors = computed(() => {
 	return;
 });
 
-const loaderTrStyles = computed<StyleValue>(() => {
-	if (isLinearOnly.value) {
-		return {
-			height: loaderHeight.value,
-			position: 'absolute',
-			top: 0,
-			width: '100%',
-		};
-	}
+const loaderTrStyles = computed<StyleValue>(() => useLoaderTrStyles({
+	isLinearOnly,
+	loaderHeight,
+}));
 
-	return {};
-});
+const loaderTdStyles = computed<StyleValue>(() => useLoaderTdStyles({
+	isLinearOnly,
+	loaderHeight,
+}));
 
-const loaderContainerClasses = computed(() => {
-	return {
-		[`${componentName}--table-loader`]: true,
-		'align-center': false,
-		'd-grid': false,
-		'flex-column': true,
-		'ma-0': true,
-		'pa-0': true,
-		'text-center': true,
-	};
-});
+const loaderContainerClasses = computed(() => useLoaderContainerClasses());
+const loaderVRowClasses = computed(() => useLoaderVRowClasses());
 
 
 // v-progress-linear //
@@ -205,7 +202,7 @@ const checkLoaderType = (type: string): boolean => {
 		z-index: 99999;
 	}
 
-	&--table-loader {
+	&--loader-tr-vrow {
 		background: rgb(var(--v-theme-surface));
 	}
 }

src/plugin/composables/helpers.ts

@@ -20,32 +20,6 @@ export function useGetSortDirection(sortBy: Props['sortBy'], id: string): string
 }
 
 
-/**
-* Checks if the loader is only linear
-*/
-export function useIsOnlyLinearLoader(loaderType: string | string[]): boolean {
-	let linearOnly = false;
-
-	if (loaderType === 'linear') {
-		linearOnly = true;
-	}
-
-	if (Array.isArray(loaderType)) {
-		linearOnly = loaderType.length === 1 && loaderType[0] === 'linear';
-	}
-
-	return linearOnly;
-};
-
-
-/**
-* Get's the loader height
-*/
-export function useLoaderHeight(loaderHeight: string | number): string | undefined {
-	return useConvertToUnit(loaderHeight) || '2px';
-};
-
-
 /**
 * Converts a string to a number with a unit.
 */

src/plugin/composables/loader.ts

@@ -0,0 +1,88 @@
+import { componentName } from '../utils/globals';
+import {
+	useConvertToUnit,
+} from './helpers';
+import {
+	UseLoaderStyles
+} from '@/types';
+
+
+/**
+* Checks if the loader is only linear
+*/
+export function useIsOnlyLinearLoader(loaderType: string | string[]): boolean {
+	let linearOnly = false;
+
+	if (loaderType === 'linear') {
+		linearOnly = true;
+	}
+
+	if (Array.isArray(loaderType)) {
+		linearOnly = loaderType.length === 1 && loaderType[0] === 'linear';
+	}
+
+	return linearOnly;
+};
+
+
+/**
+* Get's the loader height
+*/
+export function useLoaderHeight(loaderHeight: string | number): string | undefined {
+	return useConvertToUnit(loaderHeight) || '2px';
+};
+
+
+// -------------------------------------------------- Styles //
+export const useLoaderTrStyles: UseLoaderStyles = (options) => {
+	const { isLinearOnly, loaderHeight } = options;
+	let styles = {};
+
+	if (unref(isLinearOnly)) {
+		styles = {
+			height: unref(loaderHeight),
+			minHeight: unref(loaderHeight),
+		};
+	}
+
+	return styles;
+};
+
+export const useLoaderTdStyles: UseLoaderStyles = (options) => {
+	const { isLinearOnly, loaderHeight } = options;
+
+	if (unref(isLinearOnly)) {
+		return {
+			height: unref(loaderHeight),
+			position: 'absolute',
+			top: 0,
+			width: '100%',
+		};
+	}
+
+	return {};
+};
+
+
+// -------------------------------------------------- Classes //
+export const useLoaderContainerClasses = () => {
+	return {
+		[`${componentName}--loader-tr`]: true,
+		'ma-0': true,
+		'pa-0': true,
+		'text-center': true,
+	};
+};
+
+export const useLoaderVRowClasses = () => {
+	return {
+		[`${componentName}--loader-tr-vrow`]: true,
+		'align-center': false,
+		'd-grid': false,
+		'flex-column': true,
+		'ma-0': true,
+		'pa-0': true,
+		'text-center': true,
+	};
+};
+

src/plugin/styles/main.scss

@@ -61,6 +61,8 @@
   }
 
   tbody {
+    height: 2px;
+    min-height: 2px;
     position: relative;
   }
 }

src/types/index.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable no-unused-vars */
-import { CSSProperties, JSXComponent, StyleValue } from 'vue';
+import { CSSProperties, JSXComponent, StyleValue, MaybeRef } from 'vue';
 import { ThemeInstance } from 'vuetify';
 import type { EventBusKey } from '@vueuse/core';
 import type { VTextField, VProgressCircular, VProgressLinear } from 'vuetify/components';
@@ -295,9 +295,7 @@ export interface TFootSlotProps extends Omit<AllSlotProps, 'showSelect' | 'sortB
 }
 
 
-
-
-// -------------------------------------------------- Components //
+// -------------------------------------------------- Table Loader //
 export type TableLoader = {
 	colors: Props['colors'];
 	colspan: number;
@@ -311,6 +309,15 @@ export type TableLoader = {
 	textLoader?: boolean;
 };
 
+export interface UseLoaderStyles {
+	(
+		options: {
+			isLinearOnly: MaybeRef<boolean>,
+			loaderHeight: MaybeRef<Props['loaderHeight']>,
+		}
+	): CSSProperties;
+}
+
 
 // -------------------------------------------------- Composables //
 export interface UseSetLoadedDrilldown {