fix: Reduce loading jank on recent searches screen

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;

app/models/SearchQuery.ts

@@ -6,6 +6,8 @@ class SearchQuery extends BaseModel {
 
   query: string;
 
+  createdAt: string;
+
   delete = async () => {
     this.isSaving = true;
 

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 {

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`