24213 archive page render items (#24227)

* fixing archive page item rendering

* Add repro for #24213

Co-authored-by: Nemanja <31325167+nemanjaglumac@users.noreply.github.com>

frontend/src/metabase/home/containers/ArchiveApp.jsx

@@ -17,7 +17,7 @@ import listSelect from "metabase/hoc/ListSelect";
 
 import { getIsNavbarOpen, openNavbar } from "metabase/redux/app";
 import { getUserIsAdmin } from "metabase/selectors/user";
-import { isSmallScreen } from "metabase/lib/dom";
+import { isSmallScreen, getMainElement } from "metabase/lib/dom";
 
 import {
   ArchiveBarContent,
@@ -40,6 +40,11 @@ const mapDispatchToProps = {
 const ROW_HEIGHT = 68;
 
 class ArchiveApp extends Component {
+  constructor(props) {
+    super(props);
+    this.mainElement = getMainElement();
+  }
+
   componentDidMount() {
     if (!isSmallScreen()) {
       this.props.openNavbar();
@@ -70,6 +75,7 @@ class ArchiveApp extends Component {
           >
             {list.length > 0 ? (
               <VirtualizedList
+                scrollElement={this.mainElement}
                 items={list}
                 rowHeight={ROW_HEIGHT}
                 renderItem={({ item }) => (

frontend/test/metabase/scenarios/collections/archive.cy.spec.js

@@ -15,6 +15,28 @@ describe("scenarios > collections > archive", () => {
     cy.signInAsAdmin();
   });
 
+  it("should load initially hidden archived items on scroll (metabase#24213)", () => {
+    const stubbedItems = Array.from({ length: 50 }, (v, i) => ({
+      name: "Item " + i,
+      id: i + 1,
+      model: "card",
+    }));
+
+    cy.intercept("GET", "/api/search?archived=true", req => {
+      req.reply({
+        statusCode: 200,
+        body: {
+          data: stubbedItems,
+        },
+      });
+    });
+
+    cy.visit("/archive");
+
+    cy.get("main").scrollTo("bottom");
+    cy.findByText("Item 40");
+  });
+
   it("shows correct page when visiting page of question that was in archived collection (metabase##23501)", () => {
     getCollectionIdFromSlug("first_collection", collectionId => {
       const questionDetails = getQuestionDetails(collectionId);