make sure keyed each blocks have unique id to prevent infinite render…

… retries from svelte when search results contain duplicate results
StractOrg · May 4, 2024 · ccc28d7 · ccc28d7
1 parent 84f5605
commit ccc28d7
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 5 deletions.
diff --git a/frontend/src/routes/explore/+page.svelte b/frontend/src/routes/explore/+page.svelte
@@ -142,7 +142,7 @@
         </div>
       {/if}
       <div class="flex flex-wrap justify-center gap-x-5 gap-y-3" id="sites-list">
-        {#each chosenHosts as site (site)}
+        {#each chosenHosts as site (`${site}`)}
           <div transition:slide={{ duration: 100 }} animate:flip={{ duration: 200 }}>
             <Site href="http://{site}" on:delete={() => removeWebsite(site)}>
               {site}
@@ -170,7 +170,7 @@
           <Button _class="noscript:hidden" on:click={exportAsOptic}>Export as optic</Button>
         </div>
         <div class="grid items-center gap-y-2">
-          {#each similarHosts as host (host.host)}
+          {#each similarHosts as host (`${host.host}`)}
             <div
               class="col-span-full grid grid-cols-[auto_auto_minmax(auto,66%)] items-center gap-x-3"
               transition:fade={{ duration: 200 }}

diff --git a/frontend/src/routes/search/Entity.svelte b/frontend/src/routes/search/Entity.svelte
@@ -57,7 +57,7 @@
       <div class="mt-5 flex w-full flex-col text-neutral">
         <div class="font-light">Related Searches</div>
         <div class="flex overflow-auto">
-          {#each entity.relatedEntities as related (related.title)}
+          {#each entity.relatedEntities as related, index (`${index}-${related.title}`)}
             <div class="flex flex-col items-center p-4">
               {#if related.imageId != null}
                 <ResultLink href="/search?q={encodeURIComponent(related.title)}">

diff --git a/frontend/src/routes/search/Serp.svelte b/frontend/src/routes/search/Serp.svelte
@@ -78,7 +78,7 @@
 
     {#if results.webpages}
       <div class="grid w-full grid-cols-1 space-y-10 place-self-start">
-        {#each results.webpages as webpage, resultIndex (`${query}-${webpage.url}`)}
+        {#each results.webpages as webpage, resultIndex (`${query}-${resultIndex}-${webpage.url}`)}
           <div animate:flip={{ duration: 150 }}>
             <Result
               bind:this={resultElems[resultIndex]}

diff --git a/frontend/src/routes/settings/sites/+page.svelte b/frontend/src/routes/settings/sites/+page.svelte
@@ -106,7 +106,7 @@
       <h1 class="text-2xl font-medium">{title}</h1>
       <div class="text-sm">{description}</div>
       <div class="flex flex-wrap gap-x-5 gap-y-3" id="sites-list">
-        {#each $ranked[section] as site (site)}
+        {#each $ranked[section] as site, index (`${index}-${site}`)}
           <div animate:flip={{ duration: 150 }}>
             <Site href="http://{site}" on:delete={unrankSite(site)}>
               {site}