From 7eb4b52955bfa14f898e1ce4947b0e2ae9db10c3 Mon Sep 17 00:00:00 2001
From: Dmytro Shukaliuk <mityaua@users.noreply.github.com>
Date: Thu, 30 Jan 2025 17:14:31 +0200
Subject: [PATCH] Styles order and additional animation

---
 src/components/EmptyTableData.vue | 2 +-
 src/components/SearchResults.vue  | 4 ++--
 src/components/Table.vue          | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/EmptyTableData.vue b/src/components/EmptyTableData.vue
index 34f21b9..b8d8135 100644
--- 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
index 7cde48a..804fb68 100644
--- 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
index a37a4db..2888cc7 100644
--- 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]"