Cypress Testing: How To Compare Count Of Elements Before & After AJAX Call

I have a React app with infinite scrolling, so when the user scrolls to the bottom of the page, ajax request is made to retrieve more results. I have been struggling to test this code and below is what I was able to get working based on google / Stackoverflow searches. I am not clear on what Cypress.$ does, or how its different to say Cy.* commands.

I feel, I am not clear on how to get the logic to work with the async nature of Cypress. The following code is commented to explain my thinking.

  it("should scroll to bottom, retrieve & display next results", () => {
    // wait because some ajax request takes longer upon page load
    cy.wait(500);
    let initialCount = null;
    // store the length of elements in variable
    initialCount = Cypress.$("div.experienceThumbnail").length;
    // scroll down to bottom
    cy.scrollTo("bottom", { duration: 1000 });
    // wait because an ajax request is made for the pagination
    cy.wait(1111);
    // get the same elements again
    cy.get("div.experienceThumbnail")
      .its("length")
    // compare the new count to prev. count we stored above in initialCount var
      .should("be.gt", initialCount);
  });

My main question is what is the proper way of testing something like above.