diff --git a/packages/core/src/enhancers/layoutEnhancer/SettingsManager.ts b/packages/core/src/enhancers/layoutEnhancer/SettingsManager.ts
index a25a590f..d6e51a6c 100644
--- a/packages/core/src/enhancers/layoutEnhancer/SettingsManager.ts
+++ b/packages/core/src/enhancers/layoutEnhancer/SettingsManager.ts
@@ -30,6 +30,8 @@ export class SettingsManager<
       pageHorizontalMargin,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       pageVerticalMargin,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      layoutLayerTransition,
       ...rest
     } = settings
 
@@ -41,6 +43,7 @@ export class SettingsManager<
       layoutAutoResize: "container",
       pageHorizontalMargin: 24,
       pageVerticalMargin: 24,
+      layoutLayerTransition: true
     }
   }
 }
diff --git a/packages/core/src/enhancers/layoutEnhancer/layoutEnhancer.ts b/packages/core/src/enhancers/layoutEnhancer/layoutEnhancer.ts
index 243835eb..15c81a0f 100644
--- a/packages/core/src/enhancers/layoutEnhancer/layoutEnhancer.ts
+++ b/packages/core/src/enhancers/layoutEnhancer/layoutEnhancer.ts
@@ -6,7 +6,6 @@ import {
   filter,
   switchMap,
   debounceTime,
-  delay,
 } from "rxjs/operators"
 import { createMovingSafePan$ } from "./createMovingSafePan$"
 import { mapKeysTo } from "../../utils/rxjs"
@@ -21,7 +20,7 @@ import { isDefined } from "../../utils/isDefined"
 import { SettingsInterface } from "../../settings/SettingsInterface"
 import { SettingsManager } from "./SettingsManager"
 import { InputSettings, OutputSettings } from "./types"
-import { animationFrameScheduler, merge, Observable } from "rxjs"
+import { merge, Observable } from "rxjs"
 import { detectMimeTypeFromName } from "@prose-reader/shared"
 import { upsertCSS } from "../../utils/frames"
 
@@ -45,8 +44,12 @@ export const layoutEnhancer =
     next: (options: InheritOptions) => InheritOutput,
   ) =>
   (options: InheritOptions & Partial<InputSettings>): Output => {
-    const { pageHorizontalMargin, pageVerticalMargin, layoutAutoResize } =
-      options
+    const {
+      pageHorizontalMargin,
+      pageVerticalMargin,
+      layoutAutoResize,
+      layoutLayerTransition,
+    } = options
     const reader = next(options)
 
     const settingsManager = new SettingsManager<
@@ -57,6 +60,7 @@ export const layoutEnhancer =
         pageHorizontalMargin,
         pageVerticalMargin,
         layoutAutoResize,
+        layoutLayerTransition,
       },
       reader.settings as SettingsInterface<
         InheritSettings,
@@ -163,7 +167,9 @@ export const layoutEnhancer =
          * Hide document until it's ready
          */
         element.style.opacity = `0`
-        element.style.transition = `opacity 300ms`
+        if (settingsManager.values.layoutLayerTransition) {
+          element.style.transition = `opacity 300ms`
+        }
       })
     })
 
@@ -234,7 +240,29 @@ export const layoutEnhancer =
       )
       .subscribe()
 
-    merge(revealItemOnReady$, movingSafePan$, layoutOnContainerResize$)
+    /**
+     * Apply some extra classes to spine item to help debugging,
+     * styling, testing, etc.
+     */
+    const updateSpineItemClassName$ =
+      reader.spineItemsObserver.itemIsReady$.pipe(
+        tap(({ item, isReady }) => {
+          const className = `prose-spineItem-ready`
+
+          if (isReady) {
+            item.containerElement.classList.add(className)
+          } else {
+            item.containerElement.classList.remove(className)
+          }
+        }),
+      )
+
+    merge(
+      updateSpineItemClassName$,
+      revealItemOnReady$,
+      movingSafePan$,
+      layoutOnContainerResize$,
+    )
       .pipe(takeUntil(reader.$.destroy$))
       .subscribe()
 
diff --git a/packages/core/src/enhancers/layoutEnhancer/types.ts b/packages/core/src/enhancers/layoutEnhancer/types.ts
index f8d87318..931e402c 100644
--- a/packages/core/src/enhancers/layoutEnhancer/types.ts
+++ b/packages/core/src/enhancers/layoutEnhancer/types.ts
@@ -7,6 +7,10 @@ export type InputSettings = {
    * `false`: do not automatically resize.
    */
   layoutAutoResize: `container` | false
+  /**
+   * Whether to use a CSS transition when spine item is ready.
+   */
+  layoutLayerTransition: boolean
 }
 
 export type OutputSettings = InputSettings
diff --git a/packages/tests/tests/bookmarks/index.tsx b/packages/tests/tests/bookmarks/index.tsx
index 0ad3ee78..62674b75 100644
--- a/packages/tests/tests/bookmarks/index.tsx
+++ b/packages/tests/tests/bookmarks/index.tsx
@@ -22,6 +22,7 @@ async function run() {
 
   const reader = createReaderWithEnhancers({
     pageTurnAnimation: "none",
+    layoutLayerTransition: false,
     pdf: {
       pdfjsViewerInlineCss,
       getArchiveForItem: () => {
diff --git a/packages/tests/tests/bookmarks/pdf.spec.ts b/packages/tests/tests/bookmarks/pdf.spec.ts
index 9ebe4133..2e440b51 100644
--- a/packages/tests/tests/bookmarks/pdf.spec.ts
+++ b/packages/tests/tests/bookmarks/pdf.spec.ts
@@ -8,7 +8,8 @@ test("should be able to mark bookmarks on pdf (no nodes)", async ({ page }) => {
 
   await page.goto("http://localhost:3333/tests/bookmarks/index.html")
 
-  await page.waitForTimeout(500)
+  // wait for first item to be ready
+  await page.waitForSelector(".prose-spineItem-ready")
 
   await page.keyboard.press("ArrowRight")
 
diff --git a/packages/tests/tests/text/index.tsx b/packages/tests/tests/text/index.tsx
index dea9573f..bbf511bd 100644
--- a/packages/tests/tests/text/index.tsx
+++ b/packages/tests/tests/text/index.tsx
@@ -16,6 +16,7 @@ async function run() {
   const reader = createReaderWithEnhancers({
     pageTurnAnimation: "none",
     getResource: (item) => from(streamer.fetchResource({ key: `_`, resourcePath: item.href })),
+    layoutLayerTransition: false
   })
 
   reader.load({
diff --git a/packages/tests/tests/text/text.spec.ts b/packages/tests/tests/text/text.spec.ts
index ec6505ce..5026155c 100644
--- a/packages/tests/tests/text/text.spec.ts
+++ b/packages/tests/tests/text/text.spec.ts
@@ -8,7 +8,8 @@ test("should display basic text", async ({ page }) => {
 
   await page.goto("http://localhost:3333/tests/text/index.html")
 
-  await page.waitForTimeout(1000)
+  // wait for first item to be ready
+  await page.waitForSelector(".prose-spineItem-ready")
 
   expect(await page.screenshot()).toMatchSnapshot(`text.png`)
 })