Merge pull request #25 from palavrapasse/23-feat-show-illustration-wh…

…en-user-is-typing

feat: show illustration when user is typing

src/i18n/en/index.ts

@@ -24,7 +24,8 @@ const en: Translation = {
 	leakSearchHint: '(compose emails with commas)',
 	loadingState: 'Searching...',
 	failureState: 'Oops... Something went wrong (500)',
-	throttledState: 'Hold on, my back hurts! (429)'
+	throttledState: 'Hold on, my back hurts! (429)',
+	editingState: 'Go on, I will be here to assist you once you finish your search.'
 };
 
 export default en;

src/i18n/i18n-types.ts

@@ -96,6 +96,10 @@ type RootTranslation = {
 	 * C​a​l​m​a​,​ ​a​s​s​i​m​ ​f​i​c​o​ ​c​a​n​s​a​d​o​!​ ​(​4​2​9​)
 	 */
 	throttledState: string;
+	/**
+	 * F​o​r​ç​a​,​ ​a​s​s​i​m​ ​q​u​e​ ​t​e​r​m​i​n​a​r​e​s​ ​a​ ​p​e​s​q​u​i​s​a​ ​e​s​t​a​r​e​i​ ​a​q​u​i​ ​p​a​r​a​ ​t​e​ ​a​j​u​d​a​r​!
+	 */
+	editingState: string;
 };
 
 export type TranslationFunctions = {
@@ -183,6 +187,10 @@ export type TranslationFunctions = {
 	 * Calma, assim fico cansado! (429)
 	 */
 	throttledState: () => LocalizedString;
+	/**
+	 * Força, assim que terminares a pesquisa estarei aqui para te ajudar!
+	 */
+	editingState: () => LocalizedString;
 };
 
 export type Formatters = {};

src/i18n/pt/index.ts

@@ -23,7 +23,8 @@ const pt: BaseTranslation = {
 	leakSearchHint: '(utiliza a virgula se quiseres procurar por mais que um e-mail)',
 	loadingState: 'Pesquisando...',
 	failureState: 'Oops... Algo de errado não está certo (500)',
-	throttledState: 'Calma, assim fico cansado! (429)'
+	throttledState: 'Calma, assim fico cansado! (429)',
+	editingState: 'Força, assim que terminares a pesquisa estarei aqui para te ajudar!'
 };
 
 export default pt;

src/lib/components/index.ts

@@ -6,6 +6,7 @@ export { default as NopeIllustration } from './nope_illustration.svelte';
 export { default as NotifyButton } from './notify_button.svelte';
 export { default as QueryLeaksTable } from './query_leaks_table.svelte';
 export { default as QueryLeaksTargetDropdown } from './query_leaks_target_dropdown.svelte';
+export { default as ReadingIllustration } from './reading_illustration.svelte';
 export { default as SearchingIllustration } from './searching_illustration.svelte';
 export { default as SearchInput } from './search_input.svelte';
 export { default as ThumbsUpIllustration } from './thumbs_up_illustration.svelte';

src/lib/components/reading_illustration.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { base } from '$app/paths';
+</script>
+
+<img
+	id="reading-illustration"
+	class="h-96"
+	src="{base}/svg/chubby_reading.svg"
+	alt="cartoonish character reading a book"
+/>

src/routes/+page.svelte

@@ -10,7 +10,8 @@
 		QueryLeaksTargetDropdown,
 		SearchingIllustration,
 		FireIllustration,
-		NopeIllustration
+		NopeIllustration,
+		ReadingIllustration
 	} from '@components';
 	import { QueryLeaksStore } from '@stores';
 	import type { Target } from '@http';
@@ -99,6 +100,9 @@
 			<p>{$LL.throttledState()}</p>
 		{:else if !isEditing && affected.length === 0}
 			<HelloIllustration />
+		{:else}
+			<ReadingIllustration />
+			<p class="text-center">{$LL.editingState()}</p>
 		{/if}
 	</div>
 </body>