From 904f9877d1c0bf02b7ca81179427a5d35124afa9 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sat, 11 Jun 2022 15:30:58 +0300
Subject: [PATCH] Prefetch chunks behind modal buttons

---
 app/components/Button.tsx       | 4 +++-
 app/routes/plus/suggestions.tsx | 8 ++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/app/components/Button.tsx b/app/components/Button.tsx
index e68fad5c1..4f0db7067 100644
--- a/app/components/Button.tsx
+++ b/app/components/Button.tsx
@@ -60,7 +60,7 @@ type LinkButtonProps = Pick<
   ButtonProps,
   "variant" | "children" | "className" | "tiny"
 > &
-  Pick<RemixLinkProps, "to"> & { "data-cy"?: string };
+  Pick<RemixLinkProps, "to" | "prefetch"> & { "data-cy"?: string };
 
 export function LinkButton({
   variant,
@@ -68,6 +68,7 @@ export function LinkButton({
   tiny,
   className,
   to,
+  prefetch,
   "data-cy": testId,
 }: LinkButtonProps) {
   return (
@@ -75,6 +76,7 @@ export function LinkButton({
       className={clsx("button", variant, { tiny }, className)}
       to={to}
       data-cy={testId}
+      prefetch={prefetch}
     >
       {children}
     </Link>
diff --git a/app/routes/plus/suggestions.tsx b/app/routes/plus/suggestions.tsx
index 4983f488f..49a47b4e1 100644
--- a/app/routes/plus/suggestions.tsx
+++ b/app/routes/plus/suggestions.tsx
@@ -161,7 +161,11 @@ export default function PlusSuggestionsPage() {
             </div>
             {canSuggestNewUserFE({ user, suggestions: data.suggestions }) ? (
               // TODO: resetScroll={false} https://twitter.com/ryanflorence/status/1527775882797907969
-              <LinkButton to="new" data-cy="new-suggest-button">
+              <LinkButton
+                to="new"
+                data-cy="new-suggest-button"
+                prefetch="render"
+              >
                 Suggest
               </LinkButton>
             ) : null}
@@ -249,7 +253,6 @@ function SuggestedUser({
 
   invariant(data.suggestions);
 
-  // xxx: should comment/new modal links preload? does it cause many preloads if we do?
   return (
     <div className="stack md">
       <div className="plus__suggested-user-info">
@@ -279,6 +282,7 @@ function SuggestedUser({
             variant="outlined"
             to={`comment/${tier}/${suggested.suggestedUser.id}`}
             data-cy="comment-button"
+            prefetch="render"
           >
             Comment
           </LinkButton>