From 0b1491717a9559bc2dc34a3e6defd310df472380 Mon Sep 17 00:00:00 2001
From: "Amy J. Ko" <ajko@uw.edu>
Date: Thu, 2 Nov 2023 18:42:27 -0700
Subject: [PATCH] Fixed #258, more performant gallery previews.

---
 src/components/app/GalleryPreview.svelte | 100 +++++++++++++----------
 src/components/app/ProjectPreview.svelte |   5 +-
 2 files changed, 62 insertions(+), 43 deletions(-)

diff --git a/src/components/app/GalleryPreview.svelte b/src/components/app/GalleryPreview.svelte
index 752b3e3fd..91402b096 100644
--- a/src/components/app/GalleryPreview.svelte
+++ b/src/components/app/GalleryPreview.svelte
@@ -9,59 +9,78 @@
     import getProjectLink from './getProjectLink';
     import { browser } from '$app/environment';
     import MarkupHtmlView from '../concepts/MarkupHTMLView.svelte';
+    import { onMount } from 'svelte';
+    import type Project from '@models/Project';
 
     export let gallery: Gallery;
 
-    const Count = 5;
+    let index = 0;
+    let projectID = gallery.getProjects()[0];
+    let project: Project | undefined = undefined;
+    let timeoutID: NodeJS.Timeout;
 
-    /** Projects in the gallery to highlight */
-    $: highlights = gallery.getProjects().slice(0, Count);
-    $: hidden = Math.max(0, gallery.getProjects().length - Count);
+    async function loadNext() {
+        index = (index + 1) % gallery.getProjects().length;
+        projectID = gallery.getProjects()[index];
+        if (projectID) project = await Projects.get(projectID);
+        timeoutID = setTimeout(loadNext, Math.random() * 3000 + 3000);
+    }
+
+    onMount(() => {
+        loadNext();
+
+        return () =>
+            timeoutID !== undefined ? clearTimeout(timeoutID) : undefined;
+    });
 </script>
 
 <div class="gallery">
-    <Link to={`gallery/${gallery.getID()}`}
-        ><Subheader>{gallery.getName($locales)}</Subheader></Link
-    >
-    <MarkupHtmlView
-        markup={gallery.getDescription($locales).split('\n').join('\n\n')}
-    />
     <!-- We have to guard this since we haven't structured the project database to run server side fetches, so SvelteKit builds fail. -->
     {#if browser}
         <div class="previews">
-            {#each highlights as projectID, index}
-                <div class="highlight">
-                    {#await Projects.get(projectID)}
-                        <Spinning
-                            label={$locales.get(
-                                (l) => l.ui.widget.loading.message
-                            )}
-                        />
-                    {:then project}
-                        {#if project}
-                            <ProjectPreview
-                                {project}
-                                name={true}
-                                action={() =>
-                                    goto(getProjectLink(project, true))}
-                                delay={index * 300}
-                            />
-                        {/if}
-                    {/await}
-                </div>
-            {/each}
-            {#if hidden > 0}<Link to={`gallery/${gallery.getID()}`}
-                    ><span class="dots">{'•'.repeat(hidden)}</span></Link
-                >{/if}
+            {#if project === undefined}
+                <Spinning
+                    label={$locales.get((l) => l.ui.widget.loading.message)}
+                />
+            {:else}
+                <ProjectPreview
+                    {project}
+                    name={false}
+                    action={() =>
+                        project
+                            ? goto(getProjectLink(project, true))
+                            : undefined}
+                    delay={Math.random() * 1000}
+                    size={8}
+                />
+            {/if}
         </div>
     {/if}
+    <div class="description">
+        <Link to={`gallery/${gallery.getID()}`}
+            ><Subheader
+                >{gallery.getName($locales)}
+                <sub
+                    ><span class="dots"
+                        >{'•'.repeat(gallery.getProjects().length)}</span
+                    ></sub
+                ></Subheader
+            ></Link
+        >
+        <MarkupHtmlView
+            markup={gallery.getDescription($locales).split('\n').join('\n\n')}
+        />
+    </div>
 </div>
 
 <style>
     .gallery {
-        padding: var(--wordplay-spacing);
-        border-radius: var(--wordplay-border-radius);
-        margin-block-end: 2em;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        margin-block-start: 2em;
+        gap: var(--wordplay-spacing);
+        align-items: top;
     }
 
     .dots {
@@ -71,11 +90,10 @@
 
     .previews {
         display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
+        flex-direction: column;
         align-items: center;
         gap: var(--wordplay-spacing);
-        row-gap: var(--wordplay-spacing);
-        margin-block-start: calc(2 * var(--wordplay-spacing));
+        width: 8em;
+        height: 8em;
     }
 </style>
diff --git a/src/components/app/ProjectPreview.svelte b/src/components/app/ProjectPreview.svelte
index 0adb3a8ac..1e7d79c36 100644
--- a/src/components/app/ProjectPreview.svelte
+++ b/src/components/app/ProjectPreview.svelte
@@ -14,6 +14,7 @@
     export let action: (() => void) | undefined = undefined;
     export let delay: number;
     export let name = true;
+    export let size = 4;
 
     // Clone the project and get its initial value, then stop the project's evaluator.
     let evaluator: Evaluator;
@@ -42,6 +43,8 @@
 <div class="project" class:named={name}>
     <a
         class="preview"
+        style:width={`${size}rem`}
+        style:height={`${size}rem`}
         href={getProjectLink(project, true)}
         on:pointerdown={(event) =>
             action && event.button === 0 ? action() : undefined}
@@ -119,8 +122,6 @@
 
     .preview {
         cursor: pointer;
-        width: 4rem;
-        height: 4rem;
         overflow: hidden;
         border: var(--wordplay-border-color) solid var(--wordplay-border-width);
         border-radius: var(--wordplay-border-radius);