JsonBasedInfiniteList Example Private

This is a demo of the JsonBasedInfiniteList: a thousand users, each one a card, rendered in the browser from JSON and loaded as you scroll.

• Wicket renders the list as one empty <div>: JsonBasedInfiniteList is a single component without children. The users come as JSON from the list's own endpoint, 24 at a time, and each card is the template UserCard.html, next to this page, evaluated in the browser against the JSON of a user; switching to German or Spanish picks UserCard_de.html or UserCard_es.html
• Scroll the list to its last card and it fetches the next 24 users and adds them, telling below the cards that it is loading and, at the end, that all of them are shown. The list is 70% of the window high and scrolls on its own, with the slim scroll bar of a ScrollbarBehavior in the theme's colors
• The cards are laid out in a grid by the CSS of this page only; the list lays its items out in a column by default
• A click on a card shows the user next to the list, the pencil edits the user and the bin deletes it. None of them is a component: they are plain markup with a data-dt-action attribute, and a click goes to the list, which looks the user up by its key and hands it to the IItemAction registered for the action, the same way the JSON table dispatches the clicks on its rows
• Since the list has no children, the edit form and the confirmation of a deletion are shown in the Modal of ui-components on the page. Saving an edited user repaints only its card, with JsonBasedInfiniteList.updateItem; adding or deleting a user has the list fetch the users it shows again, with refresh
• Delete a user in one tab and click it in another: the click still reaches the list, which reports that the user is gone instead of failing with a missing component
• The filter and the sort start over from the first page of users, scrolled to the top, with reset and refresh
• While the page is open, the server advances the progress of random users among those the list shows and pushes the changed users over the page's web socket connection every 3 seconds; each push repaints only its card. The list reports the users it sends to the browser, so the others are neither advanced nor pushed. The messages are those of the JSON table
• The list is a feed, as screen readers know it: every card is an article telling its position and the number of users. Tab to a card, press Enter to show its details, and Page Down and Page Up to move between the cards

The React and Svelte tabs show the same cards with the InfiniteList of @antilia/react and @antilia/svelte, from the same template, the users loaded from the mounted resource /api/users. The details, the edit form and the confirmation of a deletion are the app's own, and what the app changes stays in this browser.