Styles order and additional animation

mityaua · Jan 30, 2025 · 7eb4b52 · 7eb4b52
1 parent c2af4d5
commit 7eb4b52
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 5 deletions.
diff --git a/src/components/EmptyTableData.vue b/src/components/EmptyTableData.vue
@@ -5,6 +5,6 @@ import EmptySearch from "@assets/empty-search.svg";
 <template>
 	<div class="flex items-center justify-center py-4 text-lg">
 		<span>Nothing found</span>
-		<EmptySearch class="ml-2" width="35" height="35" />
+		<EmptySearch class="ml-2 animate-pulse" width="35" height="35" />
 	</div>
 </template>
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
@@ -3,7 +3,7 @@ defineProps<{ results: number }>();
 </script>
 
 <template>
-	<div class="whitespace-nowrap text-sm font-normal text-gray-600 dark:text-gray-400">
-		<span v-if="results"> {{ results }} {{ results > 1 ? "verbs" : "verb" }} </span>
+	<div class="text-sm font-normal whitespace-nowrap text-gray-600 dark:text-gray-400">
+		<span v-show="results"> {{ results }} {{ results > 1 ? "verbs" : "verb" }} </span>
 	</div>
 </template>
diff --git a/src/components/Table.vue b/src/components/Table.vue
@@ -48,7 +48,7 @@ const onSort = (columnName: string): void => {
 				class="sticky top-0 z-20 bg-blue-100 p-2 text-left text-lg font-semibold text-gray-900 md:rounded-t-md dark:border dark:border-gray-700 dark:bg-gray-800 dark:text-white"
 			>
 				<div class="flex flex-nowrap items-center">
-					<p class="mr-2 whitespace-nowrap text-sm uppercase dark:text-gray-400">List of irregular verbs</p>
+					<p class="mr-2 text-sm whitespace-nowrap uppercase dark:text-gray-400">List of irregular verbs</p>
 					<!-- Search results -->
 					<search-results :results="searchResults.length" />
 				</div>
@@ -58,7 +58,7 @@ const onSort = (columnName: string): void => {
 			</caption>
 
 			<!-- Table head -->
-			<thead class="text-xs uppercase text-gray-700 dark:text-gray-400">
+			<thead class="text-xs text-gray-700 uppercase dark:text-gray-400">
 				<tr>
 					<TableHead
 						v-for="(value, result) in searchResults[0]"