fix: only display NutritionCalculator component on product pages

Author: VaiTon

src/routes/+layout.svelte

@@ -13,7 +13,6 @@
 	import Logo from '$lib/ui/Logo.svelte';
 	import Navbar from '$lib/ui/Navbar.svelte';
 	import Footer from '$lib/ui/Footer.svelte';
-	import NutritionCalculator from '$lib/ui/NutritionCalculator.svelte';
 	import SearchBar from '$lib/ui/SearchBar.svelte';
 	import Toast from '$lib/ui/Toast.svelte';
 
@@ -168,7 +167,9 @@
 	<progress class="progress progress-secondary fixed top-0 h-1 rounded-none"></progress>
 {/if}
 
-{#if !$isLoading}
+{#if $isLoading}
+	<div class="py-10 text-center text-xl font-medium">Loading translations...</div>
+{:else}
 	<div class="flex justify-center">
 		<div class="bg-base-100 navbar hidden max-w-7xl px-10 xl:flex">
 			<div class="navbar-start">
@@ -178,7 +179,6 @@
 				<SearchBar bind:searchQuery onSearch={gotoProductsSearch} loading={isSearching} />
 			</div>
 			<div class="navbar-end gap-2">
-				<NutritionCalculator />
 				{#if $userInfo != null}
 					<a class="btn btn-outline link" href={KEYCLOAK_ACCOUNT_URL}>Account</a>
 					<a class="btn btn-outline link" href="/logout">Log out</a>
@@ -291,9 +291,6 @@
 			{@render children?.()}
 		</div>
 	{/if}
-	<NutritionCalculator />
 	<Footer />
 	<Toast />
-{:else}
-	<div class="py-10 text-center text-xl font-medium">Loading translations...</div>
 {/if}

src/routes/products/[barcode]/+page.svelte

@@ -19,6 +19,7 @@
 	import { userInfo } from '$lib/stores/pkceLoginStore';
 	import { getWebsiteCtx } from '$lib/stores/website';
 	import type { KnowledgePanel, Product } from '@openfoodfacts/openfoodfacts-nodejs';
+	import NutritionCalculator from '$lib/ui/NutritionCalculator.svelte';
 
 	type Props = { data: PageData };
 
@@ -123,3 +124,5 @@
 		</Card>
 	{/if}
 </div>
+
+<NutritionCalculator />