Skip to content

refactor(observer): replace scroll-sentinel id with lvt-scroll-sentinel attribute #92

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
adnaan wants to merge 2 commits into
base: main
Choose a base branch
from
Open

refactor(observer): replace scroll-sentinel id with lvt-scroll-sentinel attribute #92

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5698c2f
refactor(observer): replace id="scroll-sentinel" with lvt-scroll-sent…
adnaan Apr 20, 2026
7a9b5f1
fix: scope sentinel lookup to wrapper element
adnaan Apr 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion dom/observer-manager.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ export class ObserverManager {
// that the throttle can be lifted.
this.ensureUpdatedListener(wrapperElement);

const sentinel = document.getElementById("scroll-sentinel");
const sentinel = wrapperElement.querySelector("[lvt-scroll-sentinel]");
if (!sentinel) {
// Sentinel removed (HasMore flipped false): release the old observer
// AND clear any in-flight load_more throttle. Without releaseLoadMore
Expand Down
22 changes: 11 additions & 11 deletions tests/observer-manager.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ describe("ObserverManager", () => {
expect(mockSend).not.toHaveBeenCalled();
});

it("does nothing if scroll-sentinel element is not found", () => {
it("does nothing if lvt-scroll-sentinel element is not found", () => {
document.body.innerHTML = "<div id='wrapper'></div>";
mockContext = {
getWrapperElement: () => document.getElementById("wrapper"),
Expand All @@ -116,7 +116,7 @@ describe("ObserverManager", () => {
it("sets up IntersectionObserver when sentinel exists", () => {
document.body.innerHTML = `
<div id="wrapper">
<div id="scroll-sentinel"></div>
<div lvt-scroll-sentinel></div>
</div>
`;
mockContext = {
Expand All @@ -136,7 +136,7 @@ describe("ObserverManager", () => {
it("reuses the existing observer when the sentinel is unchanged", () => {
document.body.innerHTML = `
<div id="wrapper">
<div id="scroll-sentinel"></div>
<div lvt-scroll-sentinel></div>
</div>
`;
mockContext = {
Expand All @@ -162,7 +162,7 @@ describe("ObserverManager", () => {
const wrapper = document.createElement("div");
wrapper.id = "wrapper";
const sentinel = document.createElement("div");
sentinel.id = "scroll-sentinel";
sentinel.setAttribute("lvt-scroll-sentinel", "");
wrapper.appendChild(sentinel);
document.body.appendChild(wrapper);

Expand Down Expand Up @@ -211,7 +211,7 @@ describe("ObserverManager", () => {
const wrapper = document.createElement("div");
wrapper.id = "wrapper";
const sentinel1 = document.createElement("div");
sentinel1.id = "scroll-sentinel";
sentinel1.setAttribute("lvt-scroll-sentinel", "");
wrapper.appendChild(sentinel1);
document.body.appendChild(wrapper);

Expand All @@ -234,7 +234,7 @@ describe("ObserverManager", () => {

// Step 3: sentinel reappears.
const sentinel2 = document.createElement("div");
sentinel2.id = "scroll-sentinel";
sentinel2.setAttribute("lvt-scroll-sentinel", "");
wrapper.appendChild(sentinel2);
manager.setupInfiniteScrollObserver();

Expand All @@ -250,7 +250,7 @@ describe("ObserverManager", () => {
const wrapper = document.createElement("div");
wrapper.id = "wrapper";
const sentinel = document.createElement("div");
sentinel.id = "scroll-sentinel";
sentinel.setAttribute("lvt-scroll-sentinel", "");
wrapper.appendChild(sentinel);
document.body.appendChild(wrapper);

Expand Down Expand Up @@ -286,7 +286,7 @@ describe("ObserverManager", () => {
const wrapper = document.createElement("div");
wrapper.id = "wrapper";
const sentinel1 = document.createElement("div");
sentinel1.id = "scroll-sentinel";
sentinel1.setAttribute("lvt-scroll-sentinel", "");
wrapper.appendChild(sentinel1);
document.body.appendChild(wrapper);

Expand All @@ -302,7 +302,7 @@ describe("ObserverManager", () => {
// the element on a structural transition).
sentinel1.remove();
const sentinel2 = document.createElement("div");
sentinel2.id = "scroll-sentinel";
sentinel2.setAttribute("lvt-scroll-sentinel", "");
wrapper.appendChild(sentinel2);

manager.setupInfiniteScrollObserver();
Expand Down Expand Up @@ -376,7 +376,7 @@ describe("ObserverManager", () => {
it("disconnects all observers", () => {
document.body.innerHTML = `
<div id="wrapper">
<div id="scroll-sentinel"></div>
<div lvt-scroll-sentinel></div>
</div>
`;
mockContext = {
Expand Down Expand Up @@ -410,7 +410,7 @@ describe("ObserverManager", () => {
it("is safe to call multiple times", () => {
document.body.innerHTML = `
<div id="wrapper">
<div id="scroll-sentinel"></div>
<div lvt-scroll-sentinel></div>
</div>
`;
mockContext = {
Expand Down
Loading