From 191f2764810a3936bee3d896a2bbd046235f5807 Mon Sep 17 00:00:00 2001
From: neil <neil@neils-MacBook-Pro.local>
Date: Fri, 2 Dec 2022 09:52:04 +0800
Subject: [PATCH] #49 added and use @tea/ui/ImgPreloader

---
 packages/gui/.prettierrc                      |  2 +-
 packages/gui/package.json                     |  3 +-
 .../FeaturedPackages/FeaturedPackage.svelte   | 12 ++++---
 .../FeaturedPackages/FeaturedPackages.svelte  | 31 +++++++++++--------
 .../GettingStarted/GettingStarted.svelte      |  4 +--
 .../gui/src/components/NavBar/NavBar.svelte   |  6 ++--
 .../PackageBanner/PackageBanner.svelte        | 14 ++++-----
 .../PackageReviews/PackageReviews.svelte      | 10 +++---
 .../components/PageHeader/PageHeader.svelte   |  2 +-
 .../components/Placeholder/Placeholder.svelte |  2 +-
 .../SearchPackages/SearchPackages.svelte      | 19 +++++++++---
 .../SearchPackages/SortingButtons.svelte      |  4 +--
 packages/gui/src/libs/api/mock.ts             |  7 +++++
 packages/gui/src/libs/stores.ts               |  2 +-
 .../src/routes/packages/[slug]/+page.svelte   |  8 ++---
 packages/ui/.prettierrc                       |  2 +-
 packages/ui/package.json                      |  3 +-
 .../ui/src/ArticleCard/ArticleCard.svelte     | 12 +++----
 packages/ui/src/Button/Button.svelte          |  2 +-
 .../ui/src/ImgLoader/ImgLoader.stories.ts     | 28 +++++++++++++++++
 packages/ui/src/ImgLoader/ImgLoader.svelte    | 24 ++++++++++++++
 .../ui/src/PackageCard/PackageCard.svelte     | 11 ++++---
 .../ui/src/Preloader/Preloader.stories.ts     | 14 +++++++++
 packages/ui/src/Preloader/Preloader.svelte    |  9 ++++++
 packages/ui/src/ReviewCard/ReviewCard.svelte  |  6 ++--
 .../ui/src/SearchInput/SearchInput.svelte     |  2 +-
 pnpm-lock.yaml                                | 25 +++++++++++----
 27 files changed, 191 insertions(+), 73 deletions(-)
 create mode 100644 packages/ui/src/ImgLoader/ImgLoader.stories.ts
 create mode 100644 packages/ui/src/ImgLoader/ImgLoader.svelte
 create mode 100644 packages/ui/src/Preloader/Preloader.stories.ts
 create mode 100644 packages/ui/src/Preloader/Preloader.svelte

diff --git a/packages/gui/.prettierrc b/packages/gui/.prettierrc
index 1176c1f..ea07536 100644
--- a/packages/gui/.prettierrc
+++ b/packages/gui/.prettierrc
@@ -4,7 +4,7 @@
 	"singleQuote": true,
 	"trailingComma": "none",
 	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte"],
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
 	"pluginSearchDirs": ["."],
 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }
diff --git a/packages/gui/package.json b/packages/gui/package.json
index 77b5824..fd63afa 100644
--- a/packages/gui/package.json
+++ b/packages/gui/package.json
@@ -27,8 +27,9 @@
 		"eslint-config-prettier": "^8.3.0",
 		"eslint-plugin-svelte3": "^4.0.0",
 		"postcss": "^8.4.19",
-		"prettier": "^2.6.2",
+		"prettier": "^2.7.1",
 		"prettier-plugin-svelte": "^2.7.0",
+		"prettier-plugin-tailwindcss": "^0.2.0",
 		"svelte": "^3.49.0",
 		"svelte-check": "^2.8.0",
 		"svelte-preprocess": "^4.10.7",
diff --git a/packages/gui/src/components/FeaturedPackages/FeaturedPackage.svelte b/packages/gui/src/components/FeaturedPackages/FeaturedPackage.svelte
index 31025de..7f9c3ff 100644
--- a/packages/gui/src/components/FeaturedPackages/FeaturedPackage.svelte
+++ b/packages/gui/src/components/FeaturedPackages/FeaturedPackage.svelte
@@ -1,29 +1,33 @@
 <script lang="ts">
 	import '$appcss';
 	import type { Package } from '@tea/ui/types';
+	import ImgLoader from '@tea/ui/ImgLoader/ImgLoader.svelte';
 	export let pkg: Package;
+	export let width: number;
 </script>
 
-<figure class="w-full h-full relative">
-	<img
+<figure class="featured-pkg relative h-full w-full" style={`width:${width}px`}>
+	<ImgLoader
+		class="featured-img"
 		src={!pkg.thumb_image_url.includes('https://tea.xyz')
 			? 'https://tea.xyz/Images/package-thumb-nolabel4.jpg'
 			: pkg.thumb_image_url}
 		alt={pkg.name}
 	/>
+
 	<article class="card-thumb-label">
 		<i class="icon-tea-logo-iconasset-1">
 			<!-- TODO: replace with icon.svg -->
 		</i>
 		<h3 class="text-3xl">{pkg.name}</h3>
 		{#if pkg.maintainer}
-			<h4 class="text-lg mt-2">&#x2022;&nbsp;{pkg.maintainer}</h4>
+			<h4 class="mt-2 text-lg">&#x2022;&nbsp;{pkg.maintainer}</h4>
 		{/if}
 	</article>
 </figure>
 
 <style>
-	img {
+	.featured-pkg :global(.featured-img) {
 		box-shadow: 0px 0px 12px #0c0c0c !important;
 		width: 100%;
 		height: 100%;
diff --git a/packages/gui/src/components/FeaturedPackages/FeaturedPackages.svelte b/packages/gui/src/components/FeaturedPackages/FeaturedPackages.svelte
index 75d8d20..31f75e5 100644
--- a/packages/gui/src/components/FeaturedPackages/FeaturedPackages.svelte
+++ b/packages/gui/src/components/FeaturedPackages/FeaturedPackages.svelte
@@ -3,6 +3,7 @@
 	import { onDestroy, onMount } from 'svelte';
 	import { watchResize } from 'svelte-watch-resize';
 	import type { Package } from '@tea/ui/types';
+	import Preloader from '@tea/ui/Preloader/Preloader.svelte';
 	import FeaturedPackage from './FeaturedPackage.svelte';
 	import {
 		featuredPackages as featuredPackagesStore,
@@ -56,9 +57,9 @@
 	});
 </script>
 
-<section class="bg-black w-full h-96" use:watchResize={handleContainerResize}>
+<section class="h-96 w-full bg-black" use:watchResize={handleContainerResize}>
 	<!-- <Placeholder label="FeaturedPackages" /> -->
-	<header class="bg-accent h-12 flex justify-between px-2 items-center">
+	<header class="flex h-12 items-center justify-between bg-accent px-2">
 		<p>FEATURED PACKAGES</p>
 		<ul class="flex gap-2">
 			{#each featuredPackages as pkg, i}
@@ -67,22 +68,26 @@
 						pkgFocus = i;
 						resetLoop();
 					}}
-					class={`border-white border-2 w-4 h-4 rounded-lg bg-purple transition-colors ${
+					class={`bg-purple h-4 w-4 rounded-lg border-2 border-white transition-colors ${
 						i === pkgFocus ? 'bg-purple-900' : ''
 					}`}
 				/>
 			{/each}
 		</ul>
 	</header>
-	<figure class="overflow-hidden absolute bottom-0 top-12 left-0 right-0">
-		<section class="flex absolute top-0 h-full" style={styleFeaturedPackages}>
-			{#each featuredPackages as pkg}
-				<div class="h-full" style={`width:${width}px`}>
-					<a href={`/packages/${pkg.slug}`}>
-						<FeaturedPackage {pkg} />
-					</a>
-				</div>
-			{/each}
-		</section>
+	<figure class="absolute bottom-0 top-12 left-0 right-0 overflow-hidden">
+		{#if featuredPackages.length}
+			<section class="absolute top-0 flex h-full" style={styleFeaturedPackages}>
+				{#each featuredPackages as pkg}
+					<div class="h-full" style={`width:${width}px`}>
+						<a href={`/packages/${pkg.slug}`}>
+							<FeaturedPackage {pkg} {width} />
+						</a>
+					</div>
+				{/each}
+			</section>
+		{:else}
+			<Preloader />
+		{/if}
 	</figure>
 </section>
diff --git a/packages/gui/src/components/GettingStarted/GettingStarted.svelte b/packages/gui/src/components/GettingStarted/GettingStarted.svelte
index ffd55b5..80c7ce6 100644
--- a/packages/gui/src/components/GettingStarted/GettingStarted.svelte
+++ b/packages/gui/src/components/GettingStarted/GettingStarted.svelte
@@ -7,8 +7,8 @@
 	};
 </script>
 
-<header class="text-primary bg-black border border-gray p-4">GETTING STARTED WITH TEA</header>
-<section class="grid bg-black grid-cols-3">
+<header class="border border-gray bg-black p-4 text-primary">GETTING STARTED WITH TEA</header>
+<section class="grid grid-cols-3 bg-black">
 	<div class="border border-gray p-4">
 		<ArticleCard
 			content={{
diff --git a/packages/gui/src/components/NavBar/NavBar.svelte b/packages/gui/src/components/NavBar/NavBar.svelte
index cdfaad1..e45c6f6 100644
--- a/packages/gui/src/components/NavBar/NavBar.svelte
+++ b/packages/gui/src/components/NavBar/NavBar.svelte
@@ -84,15 +84,15 @@
 	{#each routes as route}
 		<li class={route.active ? 'nav_button active' : 'nav_button'}>
 			<a href={route.path}>
-				<Button class="h-16 text-left pl-4 text-white" active={route.active}>{route.label}</Button>
+				<Button class="h-16 pl-4 text-left text-white" active={route.active}>{route.label}</Button>
 			</a>
 		</li>
 	{/each}
 	<li class="nav_button">
-		<Button class="h-16 text-left pl-4 text-white" onClick={openGithub}>VIEW ON GITHUB</Button>
+		<Button class="h-16 pl-4 text-left text-white" onClick={openGithub}>VIEW ON GITHUB</Button>
 	</li>
 
-	<footer class="border border-x-0 border-gray w-full">
+	<footer class="w-full border border-x-0 border-gray">
 		<a href="/profile">
 			<section class="flex">
 				<img width="40" height="40" src="/images/bored-ape.png" alt="profile" />
diff --git a/packages/gui/src/components/PackageBanner/PackageBanner.svelte b/packages/gui/src/components/PackageBanner/PackageBanner.svelte
index e616ce1..689d1ab 100644
--- a/packages/gui/src/components/PackageBanner/PackageBanner.svelte
+++ b/packages/gui/src/components/PackageBanner/PackageBanner.svelte
@@ -17,26 +17,26 @@
 	};
 </script>
 
-<section class="border-gray border bg-black mt-4">
+<section class="mt-4 border border-gray bg-black">
 	<header class="flex p-2">
-		<figure class="w-1/3 grow-1">
+		<figure class="grow-1 w-1/3">
 			<img width={260} src={pkg.thumb_image_url} alt={pkg.full_name} />
 		</figure>
 		<article class="w-2/3 p-4">
-			<h3 class="text-primary text-5xl">{pkg.full_name}</h3>
+			<h3 class="text-5xl text-primary">{pkg.full_name}</h3>
 			{#if pkg.maintainer}
 				<h3>* {pkg.maintainer}</h3>
 			{/if}
 			<div class="mt-4">
 				<StarRating maxRating={5} rating={packageRating} />
 			</div>
-			<p class="font-sono mt-4 text-sm">{pkg.desc}</p>
+			<p class="mt-4 font-sono text-sm">{pkg.desc}</p>
 		</article>
 	</header>
-	<footer class="flex text-white border-gray border-t h-20">
+	<footer class="flex h-20 border-t border-gray text-white">
 		<input class="flex-grow bg-black pl-4" disabled value={copyValue} />
-		<Button class="text-sm border-0 border-l-2 w-16" onClick={onCopy}>{copyButtonText}</Button>
-		<Button class="text-sm border-0 border-l-2 w-56" onClick={() => console.log('cli')}
+		<Button class="w-16 border-0 border-l-2 text-sm" onClick={onCopy}>{copyButtonText}</Button>
+		<Button class="w-56 border-0 border-l-2 text-sm" onClick={() => console.log('cli')}
 			>OPEN IN TERMINAL</Button
 		>
 	</footer>
diff --git a/packages/gui/src/components/PackageReviews/PackageReviews.svelte b/packages/gui/src/components/PackageReviews/PackageReviews.svelte
index 1d6b7f7..bf765b7 100644
--- a/packages/gui/src/components/PackageReviews/PackageReviews.svelte
+++ b/packages/gui/src/components/PackageReviews/PackageReviews.svelte
@@ -24,21 +24,21 @@
 	// ideally they should work like metro-ui to not have extreme height diff between columns
 </script>
 
-<header class="text-primary bg-black border border-gray p-4">REVIEWS ({reviews.length})</header>
-<section class="flex flex-wrap bg-black flex-row font-machina">
-	<div class="border-gray border-0 border-l-2 p-4 w-1/3">
+<header class="border border-gray bg-black p-4 text-primary">REVIEWS ({reviews.length})</header>
+<section class="flex flex-row flex-wrap bg-black font-machina">
+	<div class="w-1/3 border-0 border-l-2 border-gray p-4">
 		{#each col1 as review}
 			<ReviewCard {review} />
 			<div class="mt-4" />
 		{/each}
 	</div>
-	<div class="border-gray border-0 border-l-2 p-4 w-1/3">
+	<div class="w-1/3 border-0 border-l-2 border-gray p-4">
 		{#each col2 as review}
 			<ReviewCard {review} />
 			<div class="mt-4" />
 		{/each}
 	</div>
-	<div class="border-gray border-0 p-4 border-x-2 w-1/3">
+	<div class="w-1/3 border-0 border-x-2 border-gray p-4">
 		{#each col3 as review}
 			<ReviewCard {review} />
 			<div class="mt-4" />
diff --git a/packages/gui/src/components/PageHeader/PageHeader.svelte b/packages/gui/src/components/PageHeader/PageHeader.svelte
index 0037feb..2146296 100644
--- a/packages/gui/src/components/PageHeader/PageHeader.svelte
+++ b/packages/gui/src/components/PageHeader/PageHeader.svelte
@@ -1,3 +1,3 @@
-<header class="text-primary text-6xl font-machina uppercase mb-8">
+<header class="mb-8 font-machina text-6xl uppercase text-primary">
 	<slot />
 </header>
diff --git a/packages/gui/src/components/Placeholder/Placeholder.svelte b/packages/gui/src/components/Placeholder/Placeholder.svelte
index 5e5e9a7..68381d0 100644
--- a/packages/gui/src/components/Placeholder/Placeholder.svelte
+++ b/packages/gui/src/components/Placeholder/Placeholder.svelte
@@ -2,7 +2,7 @@
 	export let label = '';
 </script>
 
-<section class="p-8 bg-gray">
+<section class="bg-gray p-8">
 	<header>{label}</header>
 	<slot />
 </section>
diff --git a/packages/gui/src/components/SearchPackages/SearchPackages.svelte b/packages/gui/src/components/SearchPackages/SearchPackages.svelte
index 5396224..1307062 100644
--- a/packages/gui/src/components/SearchPackages/SearchPackages.svelte
+++ b/packages/gui/src/components/SearchPackages/SearchPackages.svelte
@@ -6,6 +6,7 @@
 	import type { Package } from '@tea/ui/types';
 	import PackageCard from '@tea/ui/PackageCard/PackageCard.svelte';
 	import SearchInput from '@tea/ui/SearchInput/SearchInput.svelte';
+	import Preloader from '@tea/ui/Preloader/Preloader.svelte';
 	import { onMount } from 'svelte';
 
 	let allPackages: Package[] = [];
@@ -74,8 +75,8 @@
 	};
 </script>
 
-<div class="bg-black border border-gray">
-	<section class="flex justify-between items-center">
+<div class="border border-gray bg-black">
+	<section class="flex items-center justify-between">
 		<div>
 			<SearchInput size="medium" {onSearch} />
 		</div>
@@ -86,8 +87,16 @@
 		</div>
 	</section>
 	<ul class="grid grid-cols-3">
-		{#each packages as pkg}
-			<PackageCard {pkg} link={`/packages/${pkg.slug}`} />
-		{/each}
+		{#if packages.length}
+			{#each packages as pkg}
+				<PackageCard {pkg} link={`/packages/${pkg.slug}`} />
+			{/each}
+		{:else}
+			{#each Array(12) as _}
+				<section class="h-50 border border-gray p-4">
+					<Preloader />
+				</section>
+			{/each}
+		{/if}
 	</ul>
 </div>
diff --git a/packages/gui/src/components/SearchPackages/SortingButtons.svelte b/packages/gui/src/components/SearchPackages/SortingButtons.svelte
index 66acddd..e529e6e 100644
--- a/packages/gui/src/components/SearchPackages/SortingButtons.svelte
+++ b/packages/gui/src/components/SearchPackages/SortingButtons.svelte
@@ -20,10 +20,10 @@
 	};
 </script>
 
-<section class="sorting-container font-machina bg-black text-white">
+<section class="sorting-container bg-black font-machina text-white">
 	<div class="dropdown">
 		<div class="dropdown-title">SORT ORDER</div>
-		<ul class="dropdown-content flex column">
+		<ul class="dropdown-content column flex">
 			{#each sortOptions as option}
 				<li class="flex items-center">
 					<button
diff --git a/packages/gui/src/libs/api/mock.ts b/packages/gui/src/libs/api/mock.ts
index 70482d2..bdccc2a 100644
--- a/packages/gui/src/libs/api/mock.ts
+++ b/packages/gui/src/libs/api/mock.ts
@@ -153,10 +153,12 @@ const packages: Package[] = [
 ];
 
 export async function getPackages(): Promise<Package[]> {
+	await delay(2000);
 	return packages;
 }
 
 export async function getFeaturedPackages(): Promise<Package[]> {
+	await delay(2000);
 	return packages.slice(0, 4);
 }
 
@@ -195,5 +197,10 @@ export async function getPackageReviews(full_name: string): Promise<Review[]> {
 		});
 	}
 
+	await delay(2000);
 	return reviews;
 }
+
+function delay(ms: number) {
+	return new Promise((resolve) => setTimeout(resolve, ms));
+}
diff --git a/packages/gui/src/libs/stores.ts b/packages/gui/src/libs/stores.ts
index 4869c80..93fdc79 100644
--- a/packages/gui/src/libs/stores.ts
+++ b/packages/gui/src/libs/stores.ts
@@ -28,7 +28,7 @@ interface PackagesReview {
 }
 
 function initPackagesReviewStore() {
-	const { set, update, subscribe } = writable<PackagesReview>({});
+	const { update, subscribe } = writable<PackagesReview>({});
 
 	let packagesReviews: PackagesReview = {};
 
diff --git a/packages/gui/src/routes/packages/[slug]/+page.svelte b/packages/gui/src/routes/packages/[slug]/+page.svelte
index 9d0e6a2..03ff7ab 100644
--- a/packages/gui/src/routes/packages/[slug]/+page.svelte
+++ b/packages/gui/src/routes/packages/[slug]/+page.svelte
@@ -3,19 +3,19 @@
 	import PageHeader from '$components/PageHeader/PageHeader.svelte';
 	import { backLink } from '$libs/stores';
 	import PackageBanner from '$components/PackageBanner/PackageBanner.svelte';
-	import PackageReviews from '$components/PackageReviews/PackageReviews.svelte';
+	// import PackageReviews from '$components/PackageReviews/PackageReviews.svelte';
 	backLink.set('/packages');
 
 	/** @type {import('./$types').PageData} */
 	export let data;
 
-	import { packages, featuredPackages, packagesReviewStore } from '$libs/stores';
+	import { packages, featuredPackages } from '$libs/stores';
 
-	import type { Package, Review } from '@tea/ui/types';
+	import type { Package } from '@tea/ui/types';
 
 	let pkg: Package;
 
-	let reviews: Review[];
+	// let reviews: Review[];
 
 	const setPkg = (pkgs: Package[]) => {
 		const foundPackage = pkgs.find(({ slug }) => slug === data?.slug) as Package;
diff --git a/packages/ui/.prettierrc b/packages/ui/.prettierrc
index 1176c1f..ea07536 100644
--- a/packages/ui/.prettierrc
+++ b/packages/ui/.prettierrc
@@ -4,7 +4,7 @@
 	"singleQuote": true,
 	"trailingComma": "none",
 	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte"],
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
 	"pluginSearchDirs": ["."],
 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 2479061..edca0fd 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -38,8 +38,9 @@
 		"eslint-plugin-storybook": "^0.6.7",
 		"eslint-plugin-svelte3": "^4.0.0",
 		"postcss": "^8.4.19",
-		"prettier": "^2.6.2",
+		"prettier": "^2.7.1",
 		"prettier-plugin-svelte": "^2.7.0",
+		"prettier-plugin-tailwindcss": "^0.2.0",
 		"storybook": "^7.0.0-alpha.51",
 		"svelte": "^3.44.0",
 		"svelte-check": "^2.7.1",
diff --git a/packages/ui/src/ArticleCard/ArticleCard.svelte b/packages/ui/src/ArticleCard/ArticleCard.svelte
index 686fb74..7ed9773 100644
--- a/packages/ui/src/ArticleCard/ArticleCard.svelte
+++ b/packages/ui/src/ArticleCard/ArticleCard.svelte
@@ -14,20 +14,20 @@
 </script>
 
 <section class="border border-gray">
-	<header class="bg-accent text-white p-2 uppercase">{content.title}</header>
+	<header class="bg-accent p-2 uppercase text-white">{content.title}</header>
 	<figure class="h-24">
-		<img class="object-cover h-24 w-full" src={content.img_url} alt={content.title} />
+		<img class="h-24 w-full object-cover" src={content.img_url} alt={content.title} />
 	</figure>
 	<article class="p-4">
-		<p class="text-xs font-sono line-clamp-3">{content.copy}</p>
+		<p class="font-sono text-xs line-clamp-3">{content.copy}</p>
 		{#if content.link}
 			<a href={content.link || '#'}>
-				<button class="text-primary mt-2">{content.cta_label}</button>
+				<button class="mt-2 text-primary">{content.cta_label}</button>
 			</a>
 		{:else if onClick}
-			<button on:click={onClick} class="text-primary mt-2">{content.cta_label}</button>
+			<button on:click={onClick} class="mt-2 text-primary">{content.cta_label}</button>
 		{:else}
-			<button disabled class="text-gray mt-2">{content.cta_label}</button>
+			<button disabled class="mt-2 text-gray">{content.cta_label}</button>
 		{/if}
 	</article>
 </section>
diff --git a/packages/ui/src/Button/Button.svelte b/packages/ui/src/Button/Button.svelte
index aabaa4c..0a23370 100644
--- a/packages/ui/src/Button/Button.svelte
+++ b/packages/ui/src/Button/Button.svelte
@@ -10,7 +10,7 @@
 
 <button
 	type="button font-sans"
-	class={`p-2 font-machina text-gray w-full ${clazz} ${active ? 'active' : ''}`}
+	class={`w-full p-2 font-machina text-gray ${clazz} ${active ? 'active' : ''}`}
 	on:click={() => onClick && onClick()}
 >
 	<slot />
diff --git a/packages/ui/src/ImgLoader/ImgLoader.stories.ts b/packages/ui/src/ImgLoader/ImgLoader.stories.ts
new file mode 100644
index 0000000..9186875
--- /dev/null
+++ b/packages/ui/src/ImgLoader/ImgLoader.stories.ts
@@ -0,0 +1,28 @@
+import ImgLoader from './ImgLoader.svelte';
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/svelte/writing-stories/introduction
+
+interface Props {
+	alt: string;
+	src: string;
+	class: string;
+}
+export default {
+	title: 'Example/ImgLoader',
+	component: ImgLoader,
+	tags: ['docsPage'],
+	render: (props: Props) => ({
+		Component: ImgLoader,
+		props
+	}),
+	argTypes: {}
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/svelte/writing-stories/args
+export const Example = {
+	args: {
+		class: 'w-1/2',
+		alt: 'sample',
+		src: 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/%22_Shot_From_The_Sky%22_Army_Show_1945_Oak_Ridge_%2824971013612%29.jpg/2732px-%22_Shot_From_The_Sky%22_Army_Show_1945_Oak_Ridge_%2824971013612%29.jpg'
+	}
+};
diff --git a/packages/ui/src/ImgLoader/ImgLoader.svelte b/packages/ui/src/ImgLoader/ImgLoader.svelte
new file mode 100644
index 0000000..7fa08a0
--- /dev/null
+++ b/packages/ui/src/ImgLoader/ImgLoader.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import '../app.css';
+	import Preloader from '../Preloader/Preloader.svelte';
+	export let src: string;
+	export let alt = 'loading';
+	export let style = '';
+
+	let clazz = '';
+	export { clazz as class };
+
+	function preloadImage() {
+		return new Promise(function (resolve) {
+			let img = new Image();
+			img.onload = resolve;
+			img.src = src;
+		});
+	}
+</script>
+
+{#await preloadImage()}
+	<Preloader />
+{:then _}
+	<img {style} class={clazz} {src} {alt} />
+{/await}
diff --git a/packages/ui/src/PackageCard/PackageCard.svelte b/packages/ui/src/PackageCard/PackageCard.svelte
index 749d14d..871d5f0 100644
--- a/packages/ui/src/PackageCard/PackageCard.svelte
+++ b/packages/ui/src/PackageCard/PackageCard.svelte
@@ -1,13 +1,15 @@
 <script type="ts">
 	import '../app.css';
 	import type { Package } from '../types';
+	import ImgLoader from '../ImgLoader/ImgLoader.svelte';
 	export let pkg: Package;
 	export let link: string;
 </script>
 
-<section class="p-4 border border-gray">
+<section class="package-card border border-gray p-4">
 	<figure>
-		<img
+		<ImgLoader
+			class="pkg-image"
 			src={!pkg.thumb_image_url.includes('https://tea.xyz')
 				? 'https://tea.xyz/Images/package-thumb-nolabel4.jpg'
 				: pkg.thumb_image_url}
@@ -23,7 +25,7 @@
 			{/if}
 		</article>
 	</figure>
-	<footer class="flex mt-4 justify-between items-center">
+	<footer class="mt-4 flex items-center justify-between">
 		<div>
 			<p>
 				<span class="text-xs">V&NonBreakingSpace;{pkg.version}</span>
@@ -49,9 +51,10 @@
 
 	figure {
 		position: relative;
+		min-height: 150px;
 	}
 
-	img {
+	.package-card :global(.pkg-image) {
 		box-shadow: 0px 0px 12px #0c0c0c !important;
 		width: 100%;
 		height: 100%;
diff --git a/packages/ui/src/Preloader/Preloader.stories.ts b/packages/ui/src/Preloader/Preloader.stories.ts
new file mode 100644
index 0000000..4210454
--- /dev/null
+++ b/packages/ui/src/Preloader/Preloader.stories.ts
@@ -0,0 +1,14 @@
+import Preloader from './Preloader.svelte';
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/svelte/writing-stories/introduction
+export default {
+	title: 'Example/Preloader',
+	component: Preloader,
+	tags: ['docsPage'],
+	render: () => ({
+		Component: Preloader
+	})
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/svelte/writing-stories/args
+export const Example = {};
diff --git a/packages/ui/src/Preloader/Preloader.svelte b/packages/ui/src/Preloader/Preloader.svelte
new file mode 100644
index 0000000..28355b5
--- /dev/null
+++ b/packages/ui/src/Preloader/Preloader.svelte
@@ -0,0 +1,9 @@
+<script type="ts">
+	import '../app.css';
+	// TODO: add types of preloader here
+	// export let type: EnumPreload = 'logo-pulse';
+</script>
+
+<figure class="flex h-full w-full items-center justify-center bg-black bg-opacity-90 py-8">
+	<i class="icon-tea-logo-iconasset-1 animate-pulse text-4xl text-gray" />
+</figure>
diff --git a/packages/ui/src/ReviewCard/ReviewCard.svelte b/packages/ui/src/ReviewCard/ReviewCard.svelte
index b42217a..8218ff1 100644
--- a/packages/ui/src/ReviewCard/ReviewCard.svelte
+++ b/packages/ui/src/ReviewCard/ReviewCard.svelte
@@ -26,10 +26,10 @@
 </script>
 
 <section class="border border-gray p-4">
-	<header class=" text-primary text-lg">{review.title}</header>
-	<div class="flex mt-2 text-xs">
+	<header class=" text-lg text-primary">{review.title}</header>
+	<div class="mt-2 flex text-xs">
 		<i class={`${getStarType()} text-primary`} />
-		<span class="text-gray pl-2">{getStarLabel()}</span>
+		<span class="pl-2 text-gray">{getStarLabel()}</span>
 	</div>
 	<p class="mt-2 text-sm">{review.comment}</p>
 </section>
diff --git a/packages/ui/src/SearchInput/SearchInput.svelte b/packages/ui/src/SearchInput/SearchInput.svelte
index 22eacb0..43b289c 100644
--- a/packages/ui/src/SearchInput/SearchInput.svelte
+++ b/packages/ui/src/SearchInput/SearchInput.svelte
@@ -14,7 +14,7 @@
 	};
 </script>
 
-<section class={`flex py-2 items-center ${size}`}>
+<section class={`flex items-center py-2 ${size}`}>
 	<div class="icon pl-4">
 		<i class="icon-search-icon" />
 	</div>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0321477..da6a022 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -25,8 +25,9 @@ importers:
       lodash: ^4.17.21
       lorem-ipsum: ^2.0.8
       postcss: ^8.4.19
-      prettier: ^2.6.2
+      prettier: ^2.7.1
       prettier-plugin-svelte: ^2.7.0
+      prettier-plugin-tailwindcss: ^0.2.0
       svelte: ^3.49.0
       svelte-check: ^2.8.0
       svelte-preprocess: ^4.10.7
@@ -59,6 +60,7 @@ importers:
       postcss: 8.4.19
       prettier: 2.7.1
       prettier-plugin-svelte: 2.8.0_nryolsexf6k3znhuh4uzpugsem
+      prettier-plugin-tailwindcss: 0.2.0_prettier@2.7.1
       svelte: 3.53.1
       svelte-check: 2.9.2_mocwzvuqzrhb37u7s4hjvvzl3i
       svelte-preprocess: 4.10.7_mvbmsfnr3ibpjsbee6imjcb33m
@@ -89,8 +91,9 @@ importers:
       eslint-plugin-storybook: ^0.6.7
       eslint-plugin-svelte3: ^4.0.0
       postcss: ^8.4.19
-      prettier: ^2.6.2
+      prettier: ^2.7.1
       prettier-plugin-svelte: ^2.7.0
+      prettier-plugin-tailwindcss: ^0.2.0
       storybook: ^7.0.0-alpha.51
       svelte: ^3.44.0
       svelte-check: ^2.7.1
@@ -122,6 +125,7 @@ importers:
       postcss: 8.4.19
       prettier: 2.7.1
       prettier-plugin-svelte: 2.8.0_nryolsexf6k3znhuh4uzpugsem
+      prettier-plugin-tailwindcss: 0.2.0_prettier@2.7.1
       storybook: 7.0.0-alpha.51_typescript@4.9.3
       svelte: 3.53.1
       svelte-check: 2.9.2_mocwzvuqzrhb37u7s4hjvvzl3i
@@ -1943,7 +1947,7 @@ packages:
       '@storybook/components': 7.0.0-alpha.51
       '@storybook/csf-plugin': 7.0.0-alpha.51
       '@storybook/csf-tools': 7.0.0-alpha.51
-      '@storybook/mdx2-csf': 0.1.0-next.6
+      '@storybook/mdx2-csf': 0.1.0-next.7
       '@storybook/node-logger': 7.0.0-alpha.51
       '@storybook/postinstall': 7.0.0-alpha.51
       '@storybook/preview-web': 7.0.0-alpha.51
@@ -2357,7 +2361,7 @@ packages:
       '@storybook/client-api': 7.0.0-alpha.51
       '@storybook/client-logger': 7.0.0-alpha.51
       '@storybook/core-common': 7.0.0-alpha.51_typescript@4.9.3
-      '@storybook/mdx2-csf': 0.1.0-next.6
+      '@storybook/mdx2-csf': 0.1.0-next.7
       '@storybook/node-logger': 7.0.0-alpha.51
       '@storybook/preview-web': 7.0.0-alpha.51
       '@storybook/source-loader': 7.0.0-alpha.51
@@ -2886,8 +2890,8 @@ packages:
     resolution: {integrity: sha512-SgjcpweoAWnKvbZ1uINCGcSU1BtNJP2xR0x9obNw+qp6pi0OsOo1iA1DTgB0gJM0vc3BgrKgCMlJ76v/wlRB+Q==}
     dev: true
 
-  /@storybook/mdx2-csf/0.1.0-next.6:
-    resolution: {integrity: sha512-FDBPTDHG9BcI27Zp5kwkqjsv2A3s8aUahtKeHOsmTicOBS8uWqUZ3jmL7vg6N7SpiUUBAft9/vTQfttNLeHO7w==}
+  /@storybook/mdx2-csf/0.1.0-next.7:
+    resolution: {integrity: sha512-ahwV2A4aS/D79WWum8fmrFhhbC28/f4XlEKtNG1s0EkCVwCSU17bthEBRY5/Y3IBR5jfeN/oApizNQMLh7mqAA==}
     dependencies:
       loader-utils: 2.0.4
     dev: true
@@ -8496,6 +8500,15 @@ packages:
       svelte: 3.53.1
     dev: true
 
+  /prettier-plugin-tailwindcss/0.2.0_prettier@2.7.1:
+    resolution: {integrity: sha512-Ruqig/mdWCSpqdq9WK44nrmqM4BFWTzBPhPGwC5NK3coV9eZntEQPB84MGZbjAg0XQU02jVRHXNRPREBzxvM+A==}
+    engines: {node: '>=12.17.0'}
+    peerDependencies:
+      prettier: '>=2.2.0'
+    dependencies:
+      prettier: 2.7.1
+    dev: true
+
   /prettier/2.7.1:
     resolution: {integrity: sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g==}
     engines: {node: '>=10.13.0'}