feat: make paper view components async

SE-UUlm · Jan 9, 2025 · 4f9045f · 4f9045f
1 parent ad4eb59
commit 4f9045f
Show file tree

Hide file tree

Showing 48 changed files with 450 additions and 213 deletions.
diff --git a/src/lib/components/composites/PaperBookmarkButton.svelte b/src/lib/components/composites/PaperBookmarkButton.svelte
@@ -7,15 +7,17 @@
     import Tooltip from "./Tooltip.svelte";
 
     interface Props {
-        paperId: number;
+        loadingPaperId: Promise<number>;
         isBookmarkedDefault: boolean;
     }
 
-    const { paperId, isBookmarkedDefault }: Props = $props();
+    const { loadingPaperId, isBookmarkedDefault }: Props = $props();
 
     let isBookmarked = $state(isBookmarkedDefault);
     let isHovered = $state(false);
     const tooltipText = $derived(isBookmarked ? "Remove from Reading List" : "Add to Reading List");
+    let paperId: number | undefined = $state(undefined);
+    loadingPaperId.then((id) => (paperId = id));
 
     const onMouseEnter = () => (isHovered = true);
     const onMouseLeave = () => (isHovered = false);

diff --git a/src/lib/components/composites/navigation-bar/PaperNavigationBar.svelte b/src/lib/components/composites/navigation-bar/PaperNavigationBar.svelte
@@ -6,12 +6,12 @@
     interface Props {
         user: User;
         backRef?: string | undefined;
-        paper: Paper | PaperSpec;
+        loadingPaper: Promise<Paper | PaperSpec>;
     }
 
-    const { user, backRef, paper }: Props = $props();
+    const { user, backRef, loadingPaper }: Props = $props();
 </script>
 
 <NavigationBar {user} {backRef}>
-    <PaperInfo {paper} />
+    <PaperInfo {loadingPaper} />
 </NavigationBar>
diff --git a/src/lib/components/composites/navigation-bar/ProjectNavigationBar.svelte b/src/lib/components/composites/navigation-bar/ProjectNavigationBar.svelte
@@ -6,39 +6,40 @@
     type TabValue = (typeof tabs)[number]["value"];
     interface Props {
         user: User;
-        project: Project;
+        projectId: number;
+        loadingProject: Promise<Project>;
         defaultTabValue: TabValue;
     }
 
-    const { user, project, defaultTabValue }: Props = $props();
+    const { user, projectId, loadingProject, defaultTabValue }: Props = $props();
     const tabs = [
         {
             value: "dashboard",
             label: "Dashboard",
-            href: `/project/${project.id}/dashboard`,
+            href: `/project/${projectId}/dashboard`,
         },
         {
             value: "papers",
             label: "Papers",
-            href: `/project/${project.id}/papers`,
+            href: `/project/${projectId}/papers`,
         },
         {
             value: "statistics",
             label: "Statistics",
-            href: `/project/${project.id}/statistics`,
+            href: `/project/${projectId}/statistics`,
         },
         {
             value: "settings",
             label: "Settings",
-            href: `/project/${project.id}/settings/general`,
+            href: `/project/${projectId}/settings/general`,
         },
     ] as const;
 </script>
 
 <SimpleNavigationBar
     {user}
     backRef="/"
-    title={project.name}
+    loadingTitle={loadingProject.then((project) => project.name)}
     tabs={tabs as unknown as Tab[]}
     {defaultTabValue}
 />
diff --git a/src/lib/components/composites/navigation-bar/SimpleNavigationBar.svelte b/src/lib/components/composites/navigation-bar/SimpleNavigationBar.svelte
@@ -2,18 +2,31 @@
     import NavigationBar from "./NavigationBar.svelte";
     import type { Tab } from "$lib/components/composites/navigation-bar/types";
     import type { User } from "$lib/model/backend";
+    import Skeleton from "$lib/components/primitives/skeleton/skeleton.svelte";
 
     interface Props {
         user: User;
         backRef?: string | undefined;
-        title: string;
+        loadingTitle: Promise<string>;
         tabs?: Tab[] | undefined;
         defaultTabValue?: (typeof tabs)[number]["value"] | undefined;
     }
 
-    const { user, backRef = undefined, title, tabs = [], defaultTabValue = "" }: Props = $props();
+    const {
+        user,
+        backRef = undefined,
+        loadingTitle,
+        tabs = [],
+        defaultTabValue = "",
+    }: Props = $props();
 </script>
 
 <NavigationBar {user} {backRef} {tabs} {defaultTabValue}>
-    <h2 class="place-content-center truncate">{title}</h2>
+    {#await loadingTitle}
+        <Skeleton class="h-7 w-56 rounded-full" />
+    {:then title}
+        <h2 class="place-content-center truncate">{title}</h2>
+    {:catch}
+        <h2 class="place-content-center">Error</h2>
+    {/await}
 </NavigationBar>
diff --git a/src/lib/components/composites/paper-components/PaperInfo.svelte b/src/lib/components/composites/paper-components/PaperInfo.svelte
@@ -1,26 +1,36 @@
 <script lang="ts">
+    import { Skeleton } from "$lib/components/primitives/skeleton";
     import type { Paper, PaperSpec } from "$lib/model/backend";
     import { getNames } from "$lib/utils/common-helper";
 
     interface Props {
-        paper: Paper | PaperSpec;
+        loadingPaper: Promise<Paper | PaperSpec>;
     }
 
-    const { paper }: Props = $props();
+    const { loadingPaper }: Props = $props();
 </script>
 
-<div class="grid grid-flow-row gap-0">
-    <div class="flex flex-row gap-1 items-center truncate">
-        {#if "id" in paper}
-            <div class="w-fit text-default-sb-nc text-neutral-500">#{paper.id}</div>
-        {/if}
-        <h2 class="place-content-center truncate">{paper.title}</h2>
+{#await loadingPaper}
+    <div class="grid grid-flow-row gap-1.5">
+        <Skeleton class="h-6 w-56 sm:w-80 md:w-[30rem] lg:w-[44rem] rounded-full" />
+        <Skeleton class="h-[1.125rem] w-28 sm:w-40 md:w-[15rem] lg:w-[22rem] rounded-full" />
     </div>
-    <div class="flex flex-row items-center text-hint truncate">
-        {#if paper.authors.length > 0}
-            <span class="place-content-start truncate">{getNames(paper.authors)}</span>
-        {:else}
-            <span class="italic">unknown authors</span>
-        {/if}
+{:then paper}
+    <div class="grid grid-flow-row gap-0">
+        <div class="flex flex-row gap-1 items-center truncate">
+            {#if "id" in paper}
+                <div class="w-fit text-default-sb-nc text-neutral-500">#{paper.id}</div>
+            {/if}
+            <h2 class="place-content-center truncate">{paper.title}</h2>
+        </div>
+        <div class="flex flex-row items-center text-hint truncate">
+            {#if paper.authors.length > 0}
+                <span class="place-content-start truncate">{getNames(paper.authors)}</span>
+            {:else}
+                <span class="italic">unknown authors</span>
+            {/if}
+        </div>
     </div>
-</div>
+{:catch}
+    <span class="text-error">Failed to load paper</span>
+{/await}
diff --git a/src/lib/components/composites/paper-components/PaperListEntry.svelte b/src/lib/components/composites/paper-components/PaperListEntry.svelte
@@ -80,7 +80,7 @@ Usage:
             ? `border-l-4 ${reviewDecisionColor[paper.reviewData?.finalDecision ?? 'unreviewed']}`
             : ''} rounded-md px-3 py-1.5"
     >
-        <PaperInfo {paper} />
+        <PaperInfo loadingPaper={Promise.resolve(paper)} />
     </div>
     {#if paper.reviewData !== undefined && showReviewStatus}
         {#each paper.reviewData.reviews as review}

diff --git a/src/lib/components/composites/paper-components/paper-view/PaperDetail.svelte b/src/lib/components/composites/paper-components/paper-view/PaperDetail.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+    import Skeleton from "$lib/components/primitives/skeleton/skeleton.svelte";
+    import type { Paper } from "$lib/model/backend";
+    import { cn } from "$lib/utils/shadcn-helper";
+    import type { WithElementRef } from "bits-ui";
+    import ToggleableInput from "../../input/ToggleableInput.svelte";
+    import type { HTMLAttributes } from "svelte/elements";
+
+    type Props = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+        key: string;
+        value: unknown;
+        loadingPaper: Promise<Paper>;
+        areDetailsInEditMode: boolean;
+    };
+
+    const { key, value, loadingPaper, areDetailsInEditMode }: Props = $props();
+</script>
+
+<!--
+@component
+Paper Detail component to display a single detail of a paper.
+
+Usage:
+```svelte
+    <PaperDetail id={key} {key} {value} {loadingPaper} {areDetailsInEditMode} />
+```
+-->
+<div class="flex flex-row gap-2">
+    <!-- Match top padding of input -->
+    <span class="w-24 pt-[0.3125rem]">{key}</span>
+    {#await loadingPaper}
+        <div class="pt-2">
+            <Skeleton class={cn("flex h-[1.625rem] rounded-full", value as string)} />
+        </div>
+    {:then}
+        <ToggleableInput isEditable={areDetailsInEditMode} {value} />
+    {:catch error}
+        <span class="pt-2 text-error">Coudn't load {key}: {error}</span>
+    {/await}
+</div>
diff --git a/src/lib/components/composites/paper-components/paper-view/PaperView.svelte b/src/lib/components/composites/paper-components/paper-view/PaperView.svelte
@@ -11,8 +11,7 @@
 
     interface Props {
         user: User;
-        paper: Paper;
-        isPaperBookmarked?: boolean;
+        loadingPaper: Promise<Paper>;
         showButtonBar?: boolean;
         backRef: string;
         userConfig: {
@@ -25,14 +24,15 @@
 
     const {
         user,
-        paper,
-        isPaperBookmarked = false,
+        loadingPaper,
         showButtonBar = false,
         backRef,
         userConfig,
         allowEditModeToggle = false,
         startInEditMode = false,
     }: Props = $props();
+
+    let loadingPaperId = loadingPaper.then((paper) => paper.id);
 </script>
 
 <!--
@@ -54,7 +54,7 @@ Usage:
 ```svelte
     <PaperView
         user={user}
-        paper={paper}
+        loadingPaper={loadingPaper}
         showButtonBar
         backRef="/"
         userConfig={{
@@ -67,12 +67,12 @@ Usage:
 ```
 -->
 <div class="flex flex-row justify-between h-fit w-full gap-4">
-    <PaperNavigationBar {user} {backRef} {paper} />
-    <PaperBookmarkButton paperId={paper.id} isBookmarkedDefault={isPaperBookmarked} />
+    <PaperNavigationBar {user} {backRef} {loadingPaper} />
+    <PaperBookmarkButton {loadingPaperId} isBookmarkedDefault={false} />
 </div>
 <main class="flex flex-col h-full w-full px-2 py-4 gap-5">
     <div class="flex flex-row w-full h-full gap-5">
-        <PaperDetailsCard {paper} {allowEditModeToggle} {startInEditMode} />
+        <PaperDetailsCard {loadingPaper} {allowEditModeToggle} {startInEditMode} />
         <PaperResearchContextCard />
     </div>
     {#if showButtonBar}
@@ -83,11 +83,11 @@ Usage:
                 <!-- flex grow is very high so that it grows first, before the navigation buttons do -->
                 <!-- max-width is max-width of buttons + gap, which is the reason why they have fixed values -->
                 <div class="flex flex-grow-1000 max-w-[62rem] gap-[1rem] justify-center">
-                    <DeclineButton paperId={paper.id} />
+                    <DeclineButton {loadingPaperId} />
                     {#if userConfig.showMaybeButton}
-                        <MaybeButton paperId={paper.id} />
+                        <MaybeButton {loadingPaperId} />
                     {/if}
-                    <AcceptButton paperId={paper.id} />
+                    <AcceptButton {loadingPaperId} />
                 </div>
             {/if}
             <PaperNavigationButton direction="right" href="" />

diff --git a/src/lib/components/composites/paper-components/paper-view/cards/PaperCard.svelte b/src/lib/components/composites/paper-components/paper-view/cards/PaperCard.svelte
@@ -32,7 +32,7 @@ Usage:
     </PaperCard>
 ```
 -->
-<Card.Root class="shadow-lg border-container-border-grey flex w-full h-full">
+<Card.Root class="shadow-lg border-container-border-grey flex w-full h-full max-w-[50%]">
     <section class="flex flex-col h-full w-full">
         <Tabs.Root value={tabs.length == 0 ? "" : tabs[0].value} class="flex flex-col h-full">
             <UnderlineTabsList {tabs} />