Use the ReaderHeader in the /sr/ loading view

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%',

packages/web/pages/[username]/[slug]/index.tsx

@@ -371,6 +371,7 @@ export default function Home(): JSX.Element {
       <Toaster />
 
       <ReaderHeader
+        hideDisplaySettings={false}
         showDisplaySettingsModal={
           readerSettings.setShowEditDisplaySettingsModal
         }

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"