From 9e28d14b87d2fcf2f2f05c381e3c2834e7af0071 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Thu, 25 May 2023 15:36:44 +0800
Subject: [PATCH] Use the ReaderHeader in the /sr/ loading view

---
 packages/web/components/templates/reader/ReaderHeader.tsx | 3 ++-
 packages/web/pages/[username]/[slug]/index.tsx            | 1 +
 packages/web/pages/article/sr/[id].tsx                    | 6 ++++++
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/web/components/templates/reader/ReaderHeader.tsx b/packages/web/components/templates/reader/ReaderHeader.tsx
index afa3eefa4..c30444388 100644
--- a/packages/web/components/templates/reader/ReaderHeader.tsx
+++ b/packages/web/components/templates/reader/ReaderHeader.tsx
@@ -10,6 +10,7 @@ import { theme } from '../../tokens/stitches.config'
 
 type ReaderHeaderProps = {
   alwaysDisplayToolbar: boolean
+  hideDisplaySettings: boolean
   showDisplaySettingsModal: (show: boolean) => void
   children?: ReactNode
 }
@@ -69,7 +70,7 @@ export function ReaderHeader(props: ReaderHeaderProps): JSX.Element {
           >
             {props.children}
           </SpanBox>
-          {!props.alwaysDisplayToolbar && (
+          {!props.alwaysDisplayToolbar && !props.hideDisplaySettings && (
             <SpanBox
               css={{
                 width: '100%',
diff --git a/packages/web/pages/[username]/[slug]/index.tsx b/packages/web/pages/[username]/[slug]/index.tsx
index 133702236..63299b2e5 100644
--- a/packages/web/pages/[username]/[slug]/index.tsx
+++ b/packages/web/pages/[username]/[slug]/index.tsx
@@ -371,6 +371,7 @@ export default function Home(): JSX.Element {
       <Toaster />
 
       <ReaderHeader
+        hideDisplaySettings={false}
         showDisplaySettingsModal={
           readerSettings.setShowEditDisplaySettingsModal
         }
diff --git a/packages/web/pages/article/sr/[id].tsx b/packages/web/pages/article/sr/[id].tsx
index 596e29af2..d45505c53 100644
--- a/packages/web/pages/article/sr/[id].tsx
+++ b/packages/web/pages/article/sr/[id].tsx
@@ -13,6 +13,7 @@ import { theme } from '../../../components/tokens/stitches.config'
 import { useReaderSettings } from '../../../lib/hooks/useReaderSettings'
 import { useGetArticleSavingStatus } from '../../../lib/networking/queries/useGetArticleSavingStatus'
 import { applyStoredTheme } from '../../../lib/themeUpdater'
+import { ReaderHeader } from '../../../components/templates/reader/ReaderHeader'
 
 export default function ArticleSavingRequestPage(): JSX.Element {
   const router = useRouter()
@@ -43,6 +44,11 @@ export default function ArticleSavingRequestPage(): JSX.Element {
         path: router.pathname,
       }}
     >
+      <ReaderHeader
+        alwaysDisplayToolbar={false}
+        hideDisplaySettings={true}
+        showDisplaySettingsModal={() => {}}
+      ></ReaderHeader>
       <TopBarProgress />
       <VStack
         distribution="between"