diff --git a/apps/readest-app/src-tauri/tauri.conf.json b/apps/readest-app/src-tauri/tauri.conf.json
index 153f6b60..3e15c88f 100644
--- a/apps/readest-app/src-tauri/tauri.conf.json
+++ b/apps/readest-app/src-tauri/tauri.conf.json
@@ -22,7 +22,12 @@
       }
     ],
     "security": {
-      "csp": "default-src 'self' ipc: http://ipc.localhost; img-src 'self' data: asset: http://asset.localhost",
+      "csp": {
+        "default-src": "'self' 'unsafe-inline' blob: customprotocol: asset: http://asset.localhost ipc: http://ipc.localhost",
+        "img-src": "'self' blob: data: asset: http://asset.localhost",
+        "style-src": "'self' 'unsafe-inline' blob: asset: http://asset.localhost",
+        "frame-src": "'self' blob: asset: http://asset.localhost"
+      },
       "assetProtocol": {
         "enable": true,
         "scope": {
diff --git a/apps/readest-app/src/app/reader/page.tsx b/apps/readest-app/src/app/reader/page.tsx
index ab4fbb58..2911945f 100644
--- a/apps/readest-app/src/app/reader/page.tsx
+++ b/apps/readest-app/src/app/reader/page.tsx
@@ -1,39 +1,15 @@
 'use client';
 
 import * as React from 'react';
-import { useEffect, useState } from 'react';
-import { useSearchParams, useRouter } from 'next/navigation';
-import Spinner from '@/components/Spinner';
+import { useState, Suspense } from 'react';
+import { useRouter } from 'next/navigation';
 import ReaderContent from '@/components/ReaderContent';
 import NavBar from '@/components/NavBar';
-import { useReaderStore } from '@/store/readerStore';
-import { useEnv } from '@/context/EnvContext';
 
 const ReaderPage = () => {
-  const searchParams = useSearchParams();
   const router = useRouter();
-  const id = searchParams.get('id');
 
   const [isNavBarVisible, setIsNavBarVisible] = useState(false);
-  const { envConfig } = useEnv();
-  const { books, fetchBook } = useReaderStore();
-  const bookState = books[id!] || { loading: true, content: null, error: null };
-
-  useEffect(() => {
-    envConfig.appService().then((appService) => {
-      appService
-        .loadSettings()
-        .then(() => {
-          return id && !bookState.content ? fetchBook(appService, id) : null;
-        })
-        .then((book) => {
-          if (book) {
-            book.lastUpdated = Date.now();
-            appService.updateLibraryBook(book);
-          }
-        });
-    });
-  }, [id, fetchBook, bookState.content, envConfig]);
 
   const handleBack = () => {
     console.log('Back to bookshelf');
@@ -51,13 +27,9 @@ const ReaderPage = () => {
         onClick={handleTap}
       />
       <NavBar onBack={handleBack} isVisible={isNavBarVisible} />
-      {bookState.loading && <Spinner loading={bookState.loading} />}
-      {bookState.error && (
-        <div className='text-center'>
-          <h2 className='text-red-500'>{bookState.error}</h2>
-        </div>
-      )}
-      {bookState.content && <ReaderContent content={bookState.content!} />}
+      <Suspense>
+        <ReaderContent />
+      </Suspense>
     </div>
   );
 };
diff --git a/apps/readest-app/src/components/ReaderContent.tsx b/apps/readest-app/src/components/ReaderContent.tsx
index 97d8cd32..4e484570 100644
--- a/apps/readest-app/src/components/ReaderContent.tsx
+++ b/apps/readest-app/src/components/ReaderContent.tsx
@@ -1,34 +1,59 @@
 'use client';
 
 import React from 'react';
-import { BookContent } from '@/types/book';
+import { useSearchParams } from 'next/navigation';
+
+import { useEnv } from '@/context/EnvContext';
+import { useReaderStore } from '@/store/readerStore';
 import { BookDoc, DocumentLoader } from '@/libs/document';
+
+import Spinner from '@/components/Spinner';
 import FoliateViewer from './FoliateViewer';
 
-interface ReaderContentProps {
-  content: BookContent;
-}
+const ReaderContent = () => {
+  const searchParams = useSearchParams();
+  const id = searchParams.get('id');
 
-const ReaderContent: React.FC<ReaderContentProps> = ({ content }) => {
   const [bookDoc, setBookDoc] = React.useState<BookDoc>();
+  const { envConfig } = useEnv();
+  const { books, fetchBook } = useReaderStore();
+  const bookState = books[id!] || { loading: true, content: null, error: null };
 
   React.useEffect(() => {
+    if (id && !bookState.content) {
+      envConfig.appService().then((appService) => {
+        fetchBook(appService, id).then((book) => {
+          if (book) {
+            book.lastUpdated = Date.now();
+            appService.updateLibraryBook(book);
+          }
+        });
+      });
+    }
     const loadDocument = async () => {
-      if (content.file) {
+      const content = bookState.content;
+      if (content) {
         const { book } = await new DocumentLoader(content.file).open();
         setBookDoc(book);
       }
     };
+    if (bookState.content) {
+      loadDocument();
+    }
+  }, [bookState.content, envConfig, fetchBook, id]);
 
-    loadDocument();
-  }, [content.file]);
-
-  if (!content.file || !bookDoc) {
+  if (!bookDoc) {
     return null;
   }
 
   return (
     <div>
+      {bookState.loading && <Spinner loading={bookState.loading} />}
+      {bookState.error && (
+        <div className='text-center'>
+          <h2 className='text-red-500'>{bookState.error}</h2>
+        </div>
+      )}
       <FoliateViewer book={bookDoc} />
     </div>
   );