I am working on a SvelteKit application where I need to display the details of an article from an external API. I’m using a load function to fetch the article data, but I’m encountering an issue with infinite loading of the data, and the values seem not to propagate properly into the Svelte component.

Here is the code from my +page.ts file for the load function:

export const load: PageLoad = async ({ fetch, params }) => {
  const res = await fetch(`${import.meta.env.VITE_API_URL}/api/articles/${params.id}`);
  if (res.ok) {
    const article = await res.json();
    console.log("Article loaded successfully:", article);
    return {
      props: {
        article
      }
    };
  } else {
    console.error('Failed to fetch article:', res.status);
    return {
      status: res.status,
      error: new Error('Failed to load the article')
    };
  }
};

And my svelte component:

<script lang="ts">
  export let data;

  $: article = data ? data.article : undefined;
  
  $: if (article) {
    console.log("Article received in component:", article);
  }
</script>

{#if article}
  <article>
    <h1>{article.title}</h1>
    <p>{article.description}</p>
  </article>
{:else}
  <p>Loading the article...</p>
{/if}

I receive logs indicating that the article was loaded successfully, but in the component, article remains undefined, and the page keeps displaying “Loading the article…” indefinitely. I’ve checked that data is properly passed and initialized, but I don’t understand why article is not updating correctly in the component.

Do you have any suggestions or corrections to make to my approach to solve this problem?