Don't query the /profile endpoint on every project load — radicle-explorer

We load the preferred seed config value on demand when the user clicks the share button.

👉 Preview
👉 Workflow runs
👉 Branch on GitHub

   export let baseUrl: BaseUrl;
   export let commit: Commit;
   export let project: Project;
   export let preferredSeeds: string[];
   export let publicExplorer: string;
   $: header = commit.commit;
 </script>

             stripEmphasizedStyling
             fontSize="large"
             content={header.summary} />
           <Share {preferredSeeds} {publicExplorer} {baseUrl} />
           <Share {baseUrl} />
         </span>
         <CommitAuthorship {header}>
           <span class="global-commit">{formatCommit(header.id)}</span>

 <script lang="ts">
   import type { ProjectRoute } from "@app/views/projects/router";
   import { queryProject } from "@app/lib/projects";
   import { onMount } from "svelte";
   import { activeUnloadedRouteStore, routeToPath } from "@app/lib/router";
   import { api } from "@app/lib/httpd";
   import { config } from "@app/lib/config";
   import { formatPublicExplorer } from "@app/lib/utils";
   import { activeUnloadedRouteStore, routeToPath } from "@app/lib/router";
   import { queryProject } from "@app/lib/projects";
   import Clipboard from "@app/components/Clipboard.svelte";
   import Command from "@app/components/Command.svelte";

   import Loading from "@app/components/Loading.svelte";
   import IconButton from "@app/components/IconButton.svelte";
   export let preferredSeeds: string[];
   export let publicExplorer: string;
   let usedFallbackSeed = false;
   const route = $activeUnloadedRouteStore as ProjectRoute;
   const seedRoutes = preferredSeeds.reduce<ProjectRoute[]>((acc, seed) => {
     const [, address] = seed.split("@");
     acc.push({
       ...route,
       node: {
         hostname: address.split(":")[0],
         port: config.nodes.defaultHttpdPort,
         scheme: config.nodes.defaultHttpdScheme,
       },
     });
     return acc;
   }, []);
   let publicExplorer: string;
   let seedRoutes: ProjectRoute[] = [];
   // Set seed.radicle.garden as fallback seed.
   $: if (preferredSeeds.length === 0) {
     usedFallbackSeed = true;
     seedRoutes.push({
       ...route,
       node: {
         hostname: config.nodes.defaultHttpdHostname,
         port: config.nodes.defaultHttpdPort,
         scheme: config.nodes.defaultHttpdScheme,
       },
   onMount(async () => {
     const profile = await api.profile.getProfile().catch(() => undefined);
     const route = $activeUnloadedRouteStore as ProjectRoute;
     publicExplorer =
       profile?.config.publicExplorer || config.nodes.fallbackPublicExplorer;
     const preferredSeeds = profile?.config.preferredSeeds || [];
     seedRoutes = preferredSeeds.map(seed => {
       const [, address] = seed.split("@");
       return {
         ...route,
         node: {
           hostname: address.split(":")[0],
           port: config.nodes.defaultHttpdPort,
           scheme: config.nodes.defaultHttpdScheme,
         },
       };
     });
   }
     if (preferredSeeds.length === 0) {
       usedFallbackSeed = true;
       seedRoutes.push({
         ...route,
         node: {
           hostname: config.nodes.defaultHttpdHostname,
           port: config.nodes.defaultHttpdPort,
           scheme: config.nodes.defaultHttpdScheme,
         },
       });
     }
   });
 </script>
 <style>

               </IconButton>
               <IconButton>
                 <a
                   href={path}
                   href={formatPublicExplorer(
                     publicExplorer,
                     seed.node.hostname,
                     seed.project,
                     path,
                   )}
                   target="_blank"
                   style=" width: 1.5rem;
                 height: 1.5rem; display: flex; align-items: center; justify-content: center;">

   export let totalCommitCount: number;
   export let tree: Tree;
   export let seeding: boolean;
   export let preferredSeeds: string[];
   export let publicExplorer: string;
   const api = new HttpdClient(baseUrl);

 </style>
 <Layout {baseUrl} {project} activeTab="source">
   <ProjectNameHeader
     {project}
     {baseUrl}
     {seeding}
     {preferredSeeds}
     {publicExplorer}
     slot="header" />
   <ProjectNameHeader {project} {baseUrl} {seeding} slot="header" />
   <div style:margin="1rem 0 1rem 1rem" slot="subheader">
     <Header

               </Button>
             {/if}
             {#if issueState === "read"}
               <Share {preferredSeeds} {publicExplorer} {baseUrl} />
               <Share {baseUrl} />
               {#if session && role.isDelegateOrAuthor(session.publicKey, project.delegates, issue.author.id)}
                 <CobStateButton
                   items={items.filter(

   export let issues: Issue[];
   export let project: Project;
   export let state: IssueState["status"];
   export let preferredSeeds: string[];
   export let publicExplorer: string;
   let loading = false;
   let page = 0;

     </Popover>
     <div style="margin-left: auto; display: flex; gap: 1rem;">
       <Share {preferredSeeds} {publicExplorer} {baseUrl} />
       <Share {baseUrl} />
       {#if $httpdStore.state === "authenticated" && isLocal(baseUrl.hostname)}
         <Link
           route={{

   import type { BaseUrl } from "@httpd-client";
   import debounce from "lodash/debounce";
   import { httpdStore } from "@app/lib/httpd";
   import { api, httpdStore } from "@app/lib/httpd";
   import { isLocal, toClipboard } from "@app/lib/utils";
   import { config } from "@app/lib/config";
   import Button from "@app/components/Button.svelte";
   import IconSmall from "@app/components/IconSmall.svelte";
   import Popover from "@app/components/Popover.svelte";
   import ShareButton from "./Header/ShareButton.svelte";
   import Loading from "@app/components/Loading.svelte";
   export let preferredSeeds: string[];
   export let publicExplorer: string;
   export let baseUrl: BaseUrl;
   const caption = "Link to seed";
   let linkIcon: "link" | "checkmark" = "link";
   let shareIcon: "share" | "checkmark" = "share";
   let loading = false;
   const restoreIcon = debounce(() => {
     linkIcon = "link";
     shareIcon = "share";
   }, 800);
   }, 1000);
   async function copy(text: string) {
     await toClipboard(text);
     linkIcon = "checkmark";
     shareIcon = "checkmark";
   async function copy() {
     if (loading) {
       return;
     }
     try {
       loading = true;
       const profile = await api.profile.getProfile().catch(() => undefined);
       const publicExplorer =
         profile?.config.publicExplorer ?? config.nodes.fallbackPublicExplorer;
       const text = new URL(publicExplorer).origin.concat(
         window.location.pathname,
       );
       await toClipboard(text);
       shareIcon = "checkmark";
     } finally {
       loading = false;
     }
     restoreIcon();
   }
 </script>

       slot="toggle"
       let:toggle
       on:click={toggle}>
       <IconSmall name={linkIcon} />
       <IconSmall name="link" />
       {caption}
     </Button>
     <ShareButton {publicExplorer} {preferredSeeds} slot="popover" />
     <ShareButton slot="popover" />
   </Popover>
 {:else}
   <Button
     variant="outline"
     size="regular"
     on:click={() =>
       void copy(
         new URL(publicExplorer).origin.concat(window.location.pathname),
       )}>
     <IconSmall name={shareIcon} />
     {shareIcon === "share" ? "Share" : "Link copied"}
   <Button variant="outline" size="regular" on:click={copy}>
     {#if loading}
       <Loading small noDelay />
     {:else}
       <IconSmall name={shareIcon} />
       {shareIcon === "share" ? "Share" : "Link copied"}
     {/if}
   </Button>
 {/if}

     <div
       class="global-hide-on-mobile"
       style="margin-left: auto; display: flex; gap: 0.5rem;">
       <Share {preferredSeeds} {publicExplorer} {baseUrl} />
       <Share {baseUrl} />
       <CloneButton {baseUrl} id={project.id} name={project.name} />
       <SeedButton
         {seeding}

 import * as httpd from "@app/lib/httpd";
 import { HttpdClient } from "@httpd-client";
 import { ResponseError } from "@httpd-client/lib/fetcher";
 import { config } from "@app/lib/config";
 import { handleError } from "@app/views/projects/error";
 import { nodePath } from "@app/views/nodes/router";
 import { unreachable } from "@app/lib/utils";

         rawPath: (commit?: string) => string;
         patch: Patch;
         view: PatchView;
         preferredSeeds: string[];
         publicExplorer: string;
       };
     };

     } else if (route.resource === "project.history") {
       return await loadHistoryView(route);
     } else if (route.resource === "project.commit") {
       const [profile, project, commit] = await Promise.all([
         api.profile.getProfile().catch(() => undefined),
       const [project, commit] = await Promise.all([
         api.project.getById(route.project),
         api.project.getCommitBySha(route.project, route.commit),
       ]);

           baseUrl: route.node,
           project,
           commit,
           preferredSeeds: profile?.config.preferredSeeds || [],
           publicExplorer:
             profile?.config.publicExplorer ||
             config.nodes.fallbackPublicExplorer,
         },
       };
     } else if (route.resource === "project.issue") {
       const [profile, project, issue] = await Promise.all([
         api.profile.getProfile().catch(() => undefined),
       const [project, issue] = await Promise.all([
         api.project.getById(route.project),
         api.project.getIssueById(route.project, route.issue),
       ]);

   const searchParams = new URLSearchParams(route.search || "");
   const state = (searchParams.get("state") as PatchState["status"]) || "open";
   const [profile, project, patches] = await Promise.all([
     api.profile.getProfile().catch(() => undefined),
   const [project, patches] = await Promise.all([
     api.project.getById(route.project),
     api.project.getAllPatches(route.project, {
       state,

   const api = new HttpdClient(route.node);
   const state = route.state || "open";
   const [profile, project, issues] = await Promise.all([
     api.profile.getProfile().catch(() => undefined),
   const [project, issues] = await Promise.all([
     api.project.getById(route.project),
     api.project.getAllIssues(route.project, {
       state,

       route.project
     }${commit ? `/${commit}` : ""}`;
   const [profile, project, peers, branchMap, seeding] = await Promise.all([
     api.profile.getProfile().catch(() => undefined),
   const [project, peers, branchMap, seeding] = await Promise.all([
     api.project.getById(route.project),
     api.project.getAllRemotes(route.project),
     getPeerBranches(api, route.project, route.peer),

       path,
       blobResult,
       seeding,
       preferredSeeds: profile?.config.preferredSeeds || [],
       publicExplorer:
         profile?.config.publicExplorer || config.nodes.fallbackPublicExplorer,
     },
   };
 }