History API introduced to handle back button click

Lazy image placeholder with aspect ratio

src/lib/CatelogNav.svelte

@@ -7,7 +7,7 @@
 <script lang="ts">
 import { enhance } from '$app/forms'
 import { goto, invalidateAll } from '$app/navigation'
-import { toast } from '$lib/utils'
+import { goback, toast } from '$lib/utils'
 import { createEventDispatcher, getContext, onMount } from 'svelte'
 import { cubicOut } from 'svelte/easing'
 import { fade, fly } from 'svelte/transition'
@@ -130,7 +130,7 @@ const getSelectionLabel = (option) => option.name
 				<button
 					type="button"
 					class="block shrink-0 focus:outline-none lg:hidden"
-					on:click="{() => window.history.go(-1)}">
+					on:click="{goback}">
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						fill="none"

src/lib/Nav.svelte

@@ -12,7 +12,7 @@ import { fade, fly, slide } from 'svelte/transition'
 import { goto, invalidateAll } from '$app/navigation'
 import { logo } from './config'
 import { page } from '$app/stores'
-import { toast } from '$lib/utils'
+import { goback, toast } from '$lib/utils'
 import Autocomplete from './components/Autocomplete/Autocomplete.svelte'
 import AutosuggestModal from './AutosuggestModal.svelte'
 import Cookie from 'cookie-universal'
@@ -178,7 +178,7 @@ const getSelectionLabel = (option) => option.name
 				<button
 					type="button"
 					class="block shrink-0 focus:outline-none sm:hidden"
-					on:click="{() => window.history.go(-1)}">
+					on:click="{goback}">
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						fill="none"

src/lib/ProductNav.svelte

@@ -9,6 +9,7 @@
 import { page } from '$app/stores'
 import AutosuggestModal from './AutosuggestModal.svelte'
 import type { Cart, Me } from './types'
+import { goback } from './utils'
 
 export let cart: Cart
 export let data
@@ -38,7 +39,7 @@ let show = false
 				<button
 					type="button"
 					class="h-8 w-8 shrink-0 flex items-center justify-center frosted-white rounded-full focus:outline-none"
-					on:click="{() => window.history.go(-1)}">
+					on:click="{goback}">
 					<svg
 						xmlns="http://www.w3.org/2000/svg"
 						fill="none"

src/lib/components/Image/LazyImg.svelte

@@ -60,8 +60,10 @@ onDestroy(() => {
 
 <img
 	alt="{alt}"
-	class="lazy {clazz}"
-	src="{`${getCdnImageUrl(src, IMAGE_CDN_URL)}?tr=w-${aspect_ratio.split(':')[0]},h-${
+	class="aspect-[{aspect_ratio.split(':')[0]}/{aspect_ratio.split(':')[1]}] lazy {clazz}"
+	width="{w}"
+	height="{h}"
+	src="{`${getCdnImageUrl(src, IMAGE_CDN_URL)}?tr=w-1,h-1:w-${aspect_ratio.split(':')[0]},h-${
 		aspect_ratio.split(':')[1]
 	},ar-${aspect_ratio.replace(':', '-')}`}"
 	data-src="{`${getCdnImageUrl(src, IMAGE_CDN_URL)}?tr=w-${w},h-${h},ar-${aspect_ratio.replace(

src/lib/utils/index.ts

@@ -2,9 +2,18 @@ import { currency as currencyConfig } from '../config'
 import { toasts } from 'svelte-toasts'
 import type { AllOrders, AllProducts, Category, Order, Product } from '$lib/types'
 import type { ToastProps, ToastType } from 'svelte-toasts/types/common'
+import { goto } from '$app/navigation'
 
 let allToasts: any
 
+export const goback = () => {
+	if (history.length < 3) {
+		goto('/')
+	} else {
+		window.history.go(-1)
+	}
+}
+
 export function constructURL2(url: string, fl: any) {
 	url += '?'
 	Object.keys(fl).forEach((e) => {

src/routes/(product)/product/[slug]/+page.svelte

@@ -517,7 +517,7 @@ function handleMobileCanvas() {
 								<LazyImg
 									src="{img}"
 									alt="{data.product?.name}"
-									height="262"
+									height="512"
 									class="object-contain object-top w-full h-auto first-line:text-xs" />
 							</button>
 						{/each}