App.svelte

<script>
  import ProjectBrowser from './ProjectBrowser.svelte';
  import ModulePage from './ModulePage.svelte';
  import Loading from './Loading.svelte';
  import { activeTab } from './stores';
  import { BASE_URL } from './constants';

  const matches = window.location.pathname.match(
    /\/admin\/modules\/browse\/(.+\/.+)/,
  );
  const projectId = matches ? matches[1] : null;

  let loading = true;
  let project = [];
  let projectExists = false;
  async function load(url) {
    loading = true;
    const res = await fetch(url);
    if (res.ok) {
      project = await res.json();
      $activeTab = project.source;
      projectExists = true;
    }
    loading = false;
    return project;
  }

  // Removes initial loader if it exists.
  const initialLoader = document.getElementById('initial-loader');
  if (initialLoader) {
    initialLoader.remove();
  }
</script>

{#if !projectId}
  <ProjectBrowser />
{:else}
  {#await load(`${BASE_URL}project-browser/data/project?id=${projectId}`)}
    {#if loading}
      <Loading />
    {/if}
  {:then project}
    {#if projectExists}
      <ModulePage {project} />
    {:else}
      <ProjectBrowser />
    {/if}
  {/await}
{/if}