fix: keep state in parent to avoid infinite rendering (#1825)

Signed-off-by: Simon Rey <[email protected]>

Author: eqqe

packages/frontend/src/lib/examples/Examples.svelte

@@ -5,51 +5,67 @@ import { NavPage } from '@podman-desktop/ui-svelte';
 import { bootcClient } from '/@/api/client';
 import ExamplesCard from './ExamplesCard.svelte';
 import { SvelteMap } from 'svelte/reactivity';
+import { imageInfo } from '/@/stores/imageInfo';
 
-let groups: Map<Category, Example[]> = new Map();
+let baseExamples = $state<Example[]>([]);
+let baseCategories = $state<Category[]>([]);
 
 const UNCLASSIFIED: Category = {
   id: 'unclassified',
   name: 'Unclassified',
 };
 
 onMount(async () => {
-  // onmount get the examples
-  let examples = await bootcClient.getExamples();
+  const data = await bootcClient.getExamples();
+  baseExamples = data.examples;
+  baseCategories = data.categories;
+});
+
+const examplesWithState = $derived.by(() => {
+  const pulledImages = new Set($imageInfo?.map(image => image.RepoTags?.[0] ?? '') ?? []);
+  return baseExamples.map(example => {
+    const exampleWithState: Example = {
+      ...example,
+      state: pulledImages.has(`${example.image}:${example.tag}`) ? 'pulled' : 'unpulled',
+    };
+    return exampleWithState;
+  });
+});
 
-  const categoryDict = Object.fromEntries(examples.categories.map((category: Category) => [category.id, category]));
+const groups = $derived.by(() => {
+  const newGroups = new SvelteMap<Category, Example[]>();
+  const categoryDict = Object.fromEntries(baseCategories.map(c => [c.id, c]));
 
-  const output: SvelteMap<Category, Example[]> = new SvelteMap();
+  for (const example of examplesWithState) {
+    const addExampleToCategory = (key: Category): void => {
+      const list = newGroups.get(key);
+      if (list) {
+        list.push(example);
+      } else {
+        newGroups.set(key, [example]);
+      }
+    };
 
-  for (const example of examples.examples) {
     if (example.categories.length === 0) {
-      output.set(UNCLASSIFIED, [...(output.get(UNCLASSIFIED) ?? []), example]);
+      addExampleToCategory(UNCLASSIFIED);
       continue;
     }
 
-    // iterate over all categories
     for (const categoryId of example.categories) {
-      let key: Category;
-      if (categoryId in categoryDict) {
-        key = categoryDict[categoryId];
-      } else {
-        key = UNCLASSIFIED;
-      }
-
-      output.set(key, [...(output.get(key) ?? []), example]);
+      const key = categoryDict[categoryId] ?? UNCLASSIFIED;
+      addExampleToCategory(key);
     }
   }
-
-  groups = output;
+  return newGroups;
 });
 </script>
 
 <NavPage title="Examples" searchEnabled={false}>
   <div slot="content" class="flex flex-col min-w-full min-h-full">
     <div class="min-w-full min-h-full flex-1">
       <div class="px-5 space-y-5">
-        {#each groups.entries() as [category, examples](category.id)}
-          <ExamplesCard category={category} examples={examples} />
+        {#each groups.entries() as [category, examples] (category.id)}
+          <ExamplesCard {category} {examples} />
         {/each}
       </div>
     </div>

packages/frontend/src/lib/examples/ExamplesCard.svelte

@@ -2,49 +2,19 @@
 import Card from '/@/lib/Card.svelte';
 import ExampleCard from './ExampleCard.svelte';
 import type { Example, Category } from '/@shared/src/models/examples';
-import { imageInfo } from '../../stores/imageInfo';
 
 interface Props {
   category: Category;
   examples: Example[];
 }
-let { category, examples = $bindable() }: Props = $props();
-
-// Function to update examples based on available images
-function updateExamplesWithPulledImages(): void {
-  if ($imageInfo) {
-    // Set each state to 'unpulled' by default before updating, as this prevents 'flickering'
-    // and unsure states when images are being updated
-    for (const example of examples) {
-      example.state = 'unpulled';
-    }
-
-    for (const image of $imageInfo) {
-      // Only do it if there is a RepoTags
-      const [imageRepo, imageTag] = image.RepoTags?.[0]?.split(':') ?? [];
-      // Find by image name and tag if it's in the list of examples
-      const example = examples.find(example => example.image === imageRepo && example.tag === imageTag);
-      if (example) {
-        example.state = 'pulled';
-      }
-    }
-
-    // Update examples to trigger a re-render
-    examples = [...examples];
-  }
-}
-
-// Reactive statement to call the function each time bootcAvailableImages updates
-$effect(() => {
-  updateExamplesWithPulledImages();
-});
+let { category, examples }: Props = $props();
 </script>
 
 <Card title={category.name}>
   <div class="w-full">
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-4">
       {#each examples as example (example.id)}
-        <ExampleCard example={example} />
+        <ExampleCard {example} />
       {/each}
     </div>
   </div>