From 7f715b8dc846b2a6fbbe0c7a7ed263f9e5071e05 Mon Sep 17 00:00:00 2001
From: Chris Amico <eyeseast@gmail.com>
Date: Mon, 9 Dec 2024 15:22:04 -0500
Subject: [PATCH] Only render page grid in the browser

---
 src/lib/components/viewer/Grid.svelte | 40 +++++++++++++++------------
 1 file changed, 23 insertions(+), 17 deletions(-)

diff --git a/src/lib/components/viewer/Grid.svelte b/src/lib/components/viewer/Grid.svelte
index 6002584ea..d4b7e2f4c 100644
--- a/src/lib/components/viewer/Grid.svelte
+++ b/src/lib/components/viewer/Grid.svelte
@@ -3,11 +3,14 @@
   Show a grid of thumbnail images for a single document.
   Each image should link to its respective page.
 
-  Assumes it's a child of a ViewerContext
+  Assumes it's a child of a ViewerContext.
+
+  Pages are only rendered in the browser to limit server-side page size.
 -->
 <script lang="ts">
   import type { Sizes } from "$lib/api/types";
 
+  import { browser } from "$app/environment";
   import { _ } from "svelte-i18n";
 
   import Page from "./Page.svelte";
@@ -41,22 +44,25 @@
 </script>
 
 <div class="pages" style:--image-width="{width}px">
-  {#each sizes as aspect, n}
-    {@const page_number = n + 1}
-    {@const height = width * aspect}
-    <Page {page_number} let:documentHref>
-      <a href={documentHref}>
-        <img
-          src={pageImageUrl(document, page_number, size).href}
-          alt="Page {page_number}, {document.title}"
-          title="Page {page_number}, {document.title}"
-          width="{width}px"
-          height="{height}px"
-          loading="lazy"
-        />
-      </a>
-    </Page>
-  {/each}
+  {#if browser}
+    {#each sizes as aspect, n}
+      {@const page_number = n + 1}
+      {@const height = width * aspect}
+      {@const src = pageImageUrl(document, page_number, size).href}
+      <Page {page_number} let:documentHref>
+        <a href={documentHref}>
+          <img
+            {src}
+            alt="Page {page_number}, {document.title}"
+            title="Page {page_number}, {document.title}"
+            width="{width}px"
+            height="{height}px"
+            loading="lazy"
+          />
+        </a>
+      </Page>
+    {/each}
+  {/if}
 </div>
 
 <style>