fixed search dialog opening anime

frontend/src/App.svelte

@@ -34,7 +34,6 @@
     import Home from "./routes/Home.svelte";
     import {wrap} from "svelte-spa-router/wrap";
     import Spinner from "./helperComponents/Spinner.svelte";
-    import Anime from "./routes/Anime.svelte";
     import Header from "./helperComponents/Header.svelte";
 
 
@@ -111,7 +110,7 @@
 <Router routes={{
     '/': Home,
     '/anime/:id': wrap({
-        component: Anime,
+        asyncComponent: () => import('./routes/Anime.svelte'),
         conditions: [
             async (detail) => {
                 await GetAniListSingleItem(Number(detail.params.id), true)

frontend/src/helperComponents/Search.svelte

@@ -2,7 +2,7 @@
 
     import {AniListSearch} from "../../wailsjs/go/main/App";
     import type {AniSearchList} from "../anilist/types/AniListTypes";
-    import {GetAniListSingleItem, loading} from "./GlobalVariablesAndHelperFunctions.svelte";
+    import {push} from "svelte-spa-router";
 
     let aniSearch = ""
     let aniListSearch: AniSearchList
@@ -30,7 +30,14 @@
             <div class="relative w-full">
                 <input type="search" id="anime-search" bind:value={aniSearch}
                        class="rounded-s-lg block p-2.5 w-full z-20 text-sm text-gray-900 bg-gray-50 rounded-e-lg border-s-gray-50 border-s-2 border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-s-gray-700  dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:border-blue-500"
-                       placeholder="Search for Anime" required/>
+                       placeholder="Search for Anime"
+                       on:keypress={(e) => {
+                            if (e.key === "Enter") {
+                                searchDropdown()
+                                if(aniSearch.length > 0) runAniListSearch()
+                            }
+                        }}
+                       required/>
                 <button id="aniListSearchButton"
                         class="absolute top-0 end-0 h-full p-2.5 text-sm font-medium text-white bg-blue-700 rounded-e-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
                         on:click={() => {
@@ -55,22 +62,16 @@
                     <li class="w-full">
                         <div class="flex w-full items-start p-1 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white rounded-lg">
                             <button on:click={() => {
-                                loading.set(true)
+                                searchDropdown()
-                                GetAniListSingleItem(media.id, false).then(() => {
+                                push(`#/anime/${media.id}`)
-                                    loading.set(false)
-                                    searchDropdown()
-                                })
                             }}
                                     >
                                 <img class="rounded-bl-lg rounded-tl-lg max-w-24 max-h-24" src={media.coverImage.large}
                                      alt="{media.title.english === '' || media.title.english === null ?  media.title.romaji : media.title.english} Cover">
                             </button>
                                 <button class="rounded-bl-lg rounded-tl-lg w-full h-24" on:click={() => {
-                                loading.set(true)
+                                searchDropdown()
-                                GetAniListSingleItem(media.id, false).then(() => {
+                                push(`#/anime/${media.id}`)
-                                    loading.set(false)
-                                    searchDropdown()
-                                })
                             }} >{media.title.english === '' || media.title.english === null ? media.title.romaji : media.title.english }</button>
                         </div>
                     </li>