From fecde2042fdafa134a106402185703e94864c351 Mon Sep 17 00:00:00 2001
From: Himanshu Aggarwal <aggarwal.h@outlook.com>
Date: Sun, 22 Dec 2024 14:20:07 -0500
Subject: [PATCH 1/5] Fix smooth scroll issue on SSR hydration

---
 src/core/store.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/src/core/store.ts b/src/core/store.ts
index d765be26..0e10fc02 100644
--- a/src/core/store.ts
+++ b/src/core/store.ts
@@ -332,17 +332,13 @@ export const createVirtualStore = (
               if (
                 // Keep distance from end during shifting
                 _scrollMode === SCROLL_BY_SHIFT ||
-                (_frozenRange
-                  ? // https://github.com/inokawa/virtua/issues/380
-                    index < _frozenRange[0]
-                  : // Otherwise we should maintain visible position
                     getItemOffset(index) +
                       // https://github.com/inokawa/virtua/issues/385
                       (_scrollDirection === SCROLL_IDLE &&
                       _scrollMode === SCROLL_BY_NATIVE
                         ? getItemSize(index)
                         : 0) <
-                    getRelativeScrollOffset())
+                  getRelativeScrollOffset()
               ) {
                 acc += size - getItemSize(index);
               }

From 1481e4f6b13c615d124562e4b472d474d54fc832 Mon Sep 17 00:00:00 2001
From: Himanshu Aggarwal <aggarwal.h@outlook.com>
Date: Sun, 22 Dec 2024 14:21:51 -0500
Subject: [PATCH 2/5] Update SSR story to include scroll on hydration

---
 stories/react/advanced/SSR.stories.tsx | 85 +++++++++++++++++++++++---
 1 file changed, 78 insertions(+), 7 deletions(-)

diff --git a/stories/react/advanced/SSR.stories.tsx b/stories/react/advanced/SSR.stories.tsx
index 4444e4e9..0da6e8b5 100644
--- a/stories/react/advanced/SSR.stories.tsx
+++ b/stories/react/advanced/SSR.stories.tsx
@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react";
-import React, { useLayoutEffect, useRef, useState } from "react";
-import { VList } from "../../../src";
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { VList, type VListHandle } from "../../../src";
 import { hydrateRoot } from "react-dom/client";
 import { renderToString } from "react-dom/server";
 
@@ -26,14 +26,40 @@ const createRows = (num: number) => {
   });
 };
 
-const App = () => {
-  const COUNT = 1000;
-  return <VList ssrCount={30}>{createRows(COUNT)}</VList>;
+const App = ({
+  scrollOnMount,
+  scrollToIndex,
+  smooth,
+}: {
+  scrollOnMount?: boolean;
+  scrollToIndex?: number;
+  smooth?: boolean;
+}) => {
+  const ref = useRef<VListHandle>(null);
+  useEffect(() => {
+    if (!ref.current || !scrollOnMount || !scrollToIndex) return;
+
+    ref.current.scrollToIndex(scrollToIndex, {
+      smooth: smooth,
+    });
+  }, []);
+
+  const COUNT = 10000;
+  return (
+    <>
+      <VList ref={ref} ssrCount={30}>
+        {createRows(COUNT)}
+      </VList>
+    </>
+  );
 };
 
 export const Default: StoryObj = {
   name: "SSR",
   render: () => {
+    const [scrollOnMount, setScrollOnMount] = useState(false);
+    const [scrollIndex, setScrollIndex] = useState(100);
+    const [smooth, setSmooth] = useState(true);
     const [hydrated, setHydrated] = useState(false);
     const ref = useRef<HTMLDivElement>(null);
 
@@ -43,7 +69,14 @@ export const Default: StoryObj = {
       if (!hydrated) {
         ref.current.innerHTML = renderToString(<App />);
       } else {
-        hydrateRoot(ref.current, <App />);
+        hydrateRoot(
+          ref.current,
+          <App
+            scrollOnMount={scrollOnMount}
+            scrollToIndex={scrollIndex}
+            smooth={smooth}
+          />
+        );
       }
     }, [hydrated]);
 
@@ -51,7 +84,13 @@ export const Default: StoryObj = {
       <div
         style={{ height: "100vh", display: "flex", flexDirection: "column" }}
       >
-        <div>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "space-between",
+            padding: 8,
+          }}
+        >
           <button
             disabled={hydrated}
             onClick={() => {
@@ -60,6 +99,38 @@ export const Default: StoryObj = {
           >
             hydrate
           </button>
+          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+            <label>On hydration:</label>
+            <label style={{ marginLeft: 4 }}>
+              <input
+                type="checkbox"
+                style={{ marginLeft: 4 }}
+                checked={scrollOnMount}
+                onChange={() => {
+                  setScrollOnMount((prev) => !prev);
+                }}
+              />
+              scroll to index
+            </label>
+            <input
+              type="number"
+              value={scrollIndex}
+              onChange={(e) => {
+                setScrollIndex(Number(e.target.value));
+              }}
+            />
+            <label style={{ marginLeft: 4 }}>
+              <input
+                type="checkbox"
+                style={{ marginLeft: 4 }}
+                checked={smooth}
+                onChange={() => {
+                  setSmooth((prev) => !prev);
+                }}
+              />
+              smooth
+            </label>
+          </div>
         </div>
         <div ref={ref} style={{ flex: 1 }} />
       </div>

From 73db915ff43f3c8732ed9ef1abae1851c743c74a Mon Sep 17 00:00:00 2001
From: Himanshu Aggarwal <aggarwal.h@outlook.com>
Date: Sun, 22 Dec 2024 16:00:53 -0500
Subject: [PATCH 3/5] Simplify hydration options spacing with flex

---
 stories/react/advanced/SSR.stories.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/stories/react/advanced/SSR.stories.tsx b/stories/react/advanced/SSR.stories.tsx
index 0da6e8b5..daf054bd 100644
--- a/stories/react/advanced/SSR.stories.tsx
+++ b/stories/react/advanced/SSR.stories.tsx
@@ -99,12 +99,11 @@ export const Default: StoryObj = {
           >
             hydrate
           </button>
-          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
             <label>On hydration:</label>
-            <label style={{ marginLeft: 4 }}>
+            <label>
               <input
                 type="checkbox"
-                style={{ marginLeft: 4 }}
                 checked={scrollOnMount}
                 onChange={() => {
                   setScrollOnMount((prev) => !prev);
@@ -119,10 +118,9 @@ export const Default: StoryObj = {
                 setScrollIndex(Number(e.target.value));
               }}
             />
-            <label style={{ marginLeft: 4 }}>
+            <label>
               <input
                 type="checkbox"
-                style={{ marginLeft: 4 }}
                 checked={smooth}
                 onChange={() => {
                   setSmooth((prev) => !prev);

From 896f7765c213bc4f124407ebfb11dcdf716e40e7 Mon Sep 17 00:00:00 2001
From: Himanshu Aggarwal <aggarwal.h@outlook.com>
Date: Mon, 23 Dec 2024 20:42:19 -0500
Subject: [PATCH 4/5] Fix issue with smooth scrolling after hydration

---
 src/core/store.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/core/store.ts b/src/core/store.ts
index 0e10fc02..7f50c4b9 100644
--- a/src/core/store.ts
+++ b/src/core/store.ts
@@ -332,13 +332,17 @@ export const createVirtualStore = (
               if (
                 // Keep distance from end during shifting
                 _scrollMode === SCROLL_BY_SHIFT ||
+                (_frozenRange
+                  ? // https://github.com/inokawa/virtua/issues/380
+                    !isSSR && index < _frozenRange[0]
+                  : // Otherwise we should maintain visible position
                     getItemOffset(index) +
                       // https://github.com/inokawa/virtua/issues/385
                       (_scrollDirection === SCROLL_IDLE &&
                       _scrollMode === SCROLL_BY_NATIVE
                         ? getItemSize(index)
                         : 0) <
-                  getRelativeScrollOffset()
+                    getRelativeScrollOffset())
               ) {
                 acc += size - getItemSize(index);
               }

From 02588cdfe05bb21567fa7b6911a37700dc380b19 Mon Sep 17 00:00:00 2001
From: Himanshu Aggarwal <aggarwal.h@outlook.com>
Date: Mon, 23 Dec 2024 20:43:31 -0500
Subject: [PATCH 5/5] Add test to check smooth scrolling after hydration

---
 e2e/VList.spec.ts | 111 +++++++++++++++++++++++++++-------------------
 1 file changed, 66 insertions(+), 45 deletions(-)

diff --git a/e2e/VList.spec.ts b/e2e/VList.spec.ts
index 06f44646..1d2baa9b 100644
--- a/e2e/VList.spec.ts
+++ b/e2e/VList.spec.ts
@@ -1240,51 +1240,72 @@ test.describe("RTL", () => {
   });
 });
 
-test("SSR and hydration", async ({ page }) => {
-  await page.goto(storyUrl("advanced-ssr--default"));
-
-  const component = await getScrollable(page);
-
-  const first = await getFirstItem(component);
-  const last = await getLastItem(component);
-
-  // check if SSR suceeded
-  const itemsSelector = '*[style*="top"]';
-  const items = component.locator(itemsSelector);
-  const initialLength = await items.count();
-  expect(initialLength).toBeGreaterThanOrEqual(30);
-  expect(await items.first().textContent()).toEqual("0");
-  expect(await items.last().textContent()).toEqual(String(initialLength - 1));
-  // check if items have styles for SSR
-  expect(await items.first().evaluate((e) => e.style.position)).not.toBe(
-    "absolute"
-  );
-
-  // should not change state with scroll before hydration
-  await component.evaluate((e) => e.scrollTo({ top: 1000 }));
-  expect(initialLength).toBe(await component.locator(itemsSelector).count());
-  await page.waitForTimeout(500);
-  await component.evaluate((e) => e.scrollTo({ top: 0 }));
-
-  // hydrate
-  await page.getByRole("button", { name: "hydrate" }).click();
-
-  // check if hydration suceeded but state is not changed
-  const hydratedItemsLength = await component.locator(itemsSelector).count();
-  expect(hydratedItemsLength).toBe(initialLength);
-  expect((await getFirstItem(component)).top).toBe(first.top);
-  expect((await getLastItem(component)).bottom).toBe(last.bottom);
-  // check if items do not have styles for SSR
-  expect(await items.first().evaluate((e) => e.style.position)).toBe(
-    "absolute"
-  );
-
-  // should change state with scroll after hydration
-  await component.evaluate((e) => e.scrollTo({ top: 1000 }));
-  await page.waitForTimeout(500);
-  expect(await component.locator(itemsSelector).count()).not.toBe(
-    initialLength
-  );
+test.describe("SSR and hydration", () => {
+  test("check if hydration works", async ({ page }) => {
+    await page.goto(storyUrl("advanced-ssr--default"));
+
+    const component = await getScrollable(page);
+
+    const first = await getFirstItem(component);
+    const last = await getLastItem(component);
+
+    // check if SSR suceeded
+    const itemsSelector = '*[style*="top"]';
+    const items = component.locator(itemsSelector);
+    const initialLength = await items.count();
+    expect(initialLength).toBeGreaterThanOrEqual(30);
+    expect(await items.first().textContent()).toEqual("0");
+    expect(await items.last().textContent()).toEqual(String(initialLength - 1));
+    // check if items have styles for SSR
+    expect(await items.first().evaluate((e) => e.style.position)).not.toBe(
+      "absolute"
+    );
+
+    // should not change state with scroll before hydration
+    await component.evaluate((e) => e.scrollTo({ top: 1000 }));
+    expect(initialLength).toBe(await component.locator(itemsSelector).count());
+    await page.waitForTimeout(500);
+    await component.evaluate((e) => e.scrollTo({ top: 0 }));
+
+    // hydrate
+    await page.getByRole("button", { name: "hydrate" }).click();
+
+    // check if hydration suceeded but state is not changed
+    const hydratedItemsLength = await component.locator(itemsSelector).count();
+    expect(hydratedItemsLength).toBe(initialLength);
+    expect((await getFirstItem(component)).top).toBe(first.top);
+    expect((await getLastItem(component)).bottom).toBe(last.bottom);
+    // check if items do not have styles for SSR
+    expect(await items.first().evaluate((e) => e.style.position)).toBe(
+      "absolute"
+    );
+
+    // should change state with scroll after hydration
+    await component.evaluate((e) => e.scrollTo({ top: 1000 }));
+    await page.waitForTimeout(500);
+    expect(await component.locator(itemsSelector).count()).not.toBe(
+      initialLength
+    );
+  });
+
+  test("check if smooth scrolling works after hydration", async ({ page }) => {
+    await page.goto(storyUrl("advanced-ssr--default"));
+
+    const component = await getScrollable(page);
+
+    // turn scroll to index with smooth on
+    await page.getByRole("checkbox", { name: "scroll to index" }).check();
+    await page.getByRole("checkbox", { name: "smooth" }).check();
+
+    // set scroll index to 100
+    await page.locator("input[type=number]").fill("100");
+
+    // hydrate
+    await page.getByRole("button", { name: "hydrate" }).click();
+
+    await page.waitForTimeout(1000);
+    expect((await getFirstItem(component)).text).toEqual("100");
+  });
 });
 
 test.describe("emulated iOS WebKit", () => {