From 73bc7d9f2a2f3e7f472816b8b0f8cccc749be224 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sun, 19 Dec 2021 13:07:22 -0800
Subject: [PATCH] fix: Reduce loading jank on recent searches screen

---
 app/components/NudeButton.tsx                   | 4 +++-
 app/models/SearchQuery.ts                       | 2 ++
 app/scenes/Search/Search.tsx                    | 9 +++++++++
 app/scenes/Search/components/RecentSearches.tsx | 6 +++++-
 4 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/app/components/NudeButton.tsx b/app/components/NudeButton.tsx
index 4ba513ed2..a27763ca6 100644
--- a/app/components/NudeButton.tsx
+++ b/app/components/NudeButton.tsx
@@ -1,6 +1,8 @@
 import styled from "styled-components";
 
-const Button = styled.button.attrs((type) => ({ type: type || "button" }))<{
+const Button = styled.button.attrs((props) => ({
+  type: props.type || "button",
+}))<{
   width?: number;
   height?: number;
   size?: number;
diff --git a/app/models/SearchQuery.ts b/app/models/SearchQuery.ts
index 56797e5b9..f26921bd0 100644
--- a/app/models/SearchQuery.ts
+++ b/app/models/SearchQuery.ts
@@ -6,6 +6,8 @@ class SearchQuery extends BaseModel {
 
   query: string;
 
+  createdAt: string;
+
   delete = async () => {
     this.isSaving = true;
 
diff --git a/app/scenes/Search/Search.tsx b/app/scenes/Search/Search.tsx
index 9c4dbb535..023ae3c3d 100644
--- a/app/scenes/Search/Search.tsx
+++ b/app/scenes/Search/Search.tsx
@@ -9,6 +9,7 @@ import { RouteComponentProps, StaticContext, withRouter } from "react-router";
 import { Waypoint } from "react-waypoint";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import { v4 as uuidv4 } from "uuid";
 import { DateFilter as TDateFilter } from "@shared/types";
 import { DEFAULT_PAGINATION_LIMIT } from "~/stores/BaseStore";
 import { SearchParams } from "~/stores/DocumentsStore";
@@ -216,6 +217,14 @@ class Search extends React.Component<Props> {
       try {
         const results = await this.props.documents.search(this.query, params);
 
+        // Add to the searches store so this search can immediately appear in
+        // the recent searches list without a flash of load
+        this.props.searches.add({
+          id: uuidv4(),
+          query: this.query,
+          createdAt: new Date().toISOString(),
+        });
+
         if (results.length === 0 || results.length < DEFAULT_PAGINATION_LIMIT) {
           this.allowLoadMore = false;
         } else {
diff --git a/app/scenes/Search/components/RecentSearches.tsx b/app/scenes/Search/components/RecentSearches.tsx
index cf0cf3f65..98adf61ec 100644
--- a/app/scenes/Search/components/RecentSearches.tsx
+++ b/app/scenes/Search/components/RecentSearches.tsx
@@ -4,6 +4,7 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
+import Fade from "~/components/Fade";
 import NudeButton from "~/components/NudeButton";
 import Tooltip from "~/components/Tooltip";
 import useStores from "~/hooks/useStores";
@@ -12,12 +13,13 @@ import { searchUrl } from "~/utils/routeHelpers";
 function RecentSearches() {
   const { searches } = useStores();
   const { t } = useTranslation();
+  const [isPreloaded] = React.useState(searches.recent.length > 0);
 
   React.useEffect(() => {
     searches.fetchPage({});
   }, [searches]);
 
-  return searches.recent.length ? (
+  const content = searches.recent.length ? (
     <>
       <Heading>{t("Recent searches")}</Heading>
       <List>
@@ -44,6 +46,8 @@ function RecentSearches() {
       </List>
     </>
   ) : null;
+
+  return isPreloaded ? content : <Fade>{content}</Fade>;
 }
 
 const Heading = styled.h2`