Updated load more list and focus on render

src/components/elements/load-more-list.tsx

@@ -1,10 +1,13 @@
 "use client"
 
 import {useLayoutEffect, useRef, HtmlHTMLAttributes, JSX, useId, useState} from "react"
-import Button from "@components/elements/button"
 import {useAutoAnimate} from "@formkit/auto-animate/react"
 import {useBoolean, useCounter} from "usehooks-ts"
 import useFocusOnRender from "@lib/hooks/useFocusOnRender"
+import useServerAction from "@lib/hooks/useServerAction"
+import {twMerge} from "tailwind-merge"
+import {ArrowPathIcon} from "@heroicons/react/20/solid"
+import Button from "@components/elements/button"
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   /**
@@ -31,23 +34,26 @@ type Props = HtmlHTMLAttributes<HTMLDivElement> & {
    * Server action callback to fetch the next "page" contents.
    */
   loadPage?: (_page: number) => Promise<JSX.Element>
+  /**
+   * Count of the total number of items of all pages.
+   */
+  totalItems: number
 }
 
-const LoadMoreList = ({buttonText, children, ulProps, liProps, loadPage, ...props}: Props) => {
+const LoadMoreList = ({buttonText, children, ulProps, liProps, totalItems, loadPage, ...props}: Props) => {
   const id = useId()
   const {count: page, increment: incrementPage} = useCounter(0)
   const [items, setItems] = useState<JSX.Element[]>(children)
-  const {value: hasMore, setValue: setHasMore} = useBoolean(!!loadPage)
   const {value: focusOnElement, setTrue: enableFocusElement, setFalse: disableFocusElement} = useBoolean(false)
+  const [runLoadPage, isPending] = useServerAction(loadPage)
 
   const focusItemRef = useRef<HTMLLIElement>(null)
   const [animationParent] = useAutoAnimate<HTMLUListElement>()
 
   const showMoreItems = async () => {
     if (loadPage) {
-      const results = await loadPage(page + 1)
-      if (results.props.children.length < 30) setHasMore(false)
-      setItems([...items, ...results.props.children])
+      const results = await runLoadPage(page + 1)
+      setItems([...items, ...results?.props.children])
     }
 
     enableFocusElement()
@@ -61,7 +67,14 @@ const LoadMoreList = ({buttonText, children, ulProps, liProps, loadPage, ...prop
   }, [focusOnElement, setFocusOnItem])
 
   return (
-    <div {...props}>
+    <div {...props} className={twMerge("relative", props.className)}>
+      {isPending && (
+        <div className="absolute left-0 top-0 z-20 h-full w-full bg-black-30 bg-opacity-80">
+          <div className="absolute bottom-20 left-1/2 -translate-x-[25px]">
+            <ArrowPathIcon className="animate-spin" width={50} />
+          </div>
+        </div>
+      )}
       <ul {...ulProps} ref={animationParent}>
         {items.map((item, i) => (
           <li
@@ -79,8 +92,8 @@ const LoadMoreList = ({buttonText, children, ulProps, liProps, loadPage, ...prop
         Showing {items.length} items.
       </span>
 
-      {hasMore && (
-        <Button centered onClick={showMoreItems}>
+      {items.length < totalItems && (
+        <Button buttonElem centered onClick={showMoreItems}>
           {buttonText ? buttonText : "Load More"}
         </Button>
       )}

src/components/paragraphs/stanford-lists/list-paragraph.tsx

@@ -2,7 +2,7 @@ import Wysiwyg from "@components/elements/wysiwyg"
 import Button from "@components/elements/button"
 import View from "@components/views/view"
 import {H2} from "@components/elements/headers"
-import {cache, ElementType, HtmlHTMLAttributes, JSX} from "react"
+import {cache, ElementType, HtmlHTMLAttributes, JSX, Suspense} from "react"
 import {
   Maybe,
   NodeStanfordCourse,
@@ -79,24 +79,26 @@ const ListParagraph = async ({paragraph, ...props}: Props) => {
       <Wysiwyg html={paragraph.suListDescription?.processed} />
 
       {viewId && displayId && viewItems && (
-        <View
-          viewId={viewId}
-          displayId={displayId}
-          items={viewItems}
-          headingLevel={paragraph.suListHeadline ? "h3" : "h2"}
-          loadPage={
-            addLoadMore
-              ? loadPage.bind(
-                  null,
-                  viewId,
-                  displayId,
-                  paragraph.suListView?.contextualFilter || [],
-                  !!paragraph.suListHeadline
-                )
-              : undefined
-          }
-          totalItems={totalItems}
-        />
+        <Suspense>
+          <View
+            viewId={viewId}
+            displayId={displayId}
+            items={viewItems}
+            headingLevel={paragraph.suListHeadline ? "h3" : "h2"}
+            loadPage={
+              addLoadMore
+                ? loadPage.bind(
+                    null,
+                    viewId,
+                    displayId,
+                    paragraph.suListView?.contextualFilter || [],
+                    !!paragraph.suListHeadline
+                  )
+                : undefined
+            }
+            totalItems={totalItems}
+          />
+        </Suspense>
       )}
 
       {viewItems.length === 0 && behaviors.list_paragraph?.empty_message && (

src/components/views/card-view-grid.tsx

@@ -11,13 +11,18 @@ type Props = {
    * If those nodes titles should display as <h2> or <h3>
    */
   headingLevel?: "h2" | "h3"
+  /**
+   * Total number of items on all pages.
+   */
+  totalItems: number
 }
 
-const CardViewGrid = ({items, headingLevel}: Props) => {
+const CardViewGrid = ({items, totalItems, headingLevel}: Props) => {
   return (
     <LoadMoreList
       ulProps={{className: "list-unstyled grid @4xl:grid-cols-2 @7xl:grid-cols-3 gap-20 mb-20"}}
       liProps={{className: ""}}
+      totalItems={totalItems}
     >
       {items.map(item => (
         <NodeCard node={item} key={item.id} headingLevel={headingLevel} />

src/components/views/shared-tags/shared-tags-card-view.tsx

@@ -10,9 +10,13 @@ interface Props {
    * If those nodes titles should display as <h2> or <h3>
    */
   headingLevel?: "h2" | "h3"
+  /**
+   * Total number of items to build the pager.
+   */
+  totalItems: number
 }
 
-const SharedTagsCardView = async ({items = [], headingLevel}: Props) => {
-  return <CardViewGrid items={items} headingLevel={headingLevel} />
+const SharedTagsCardView = async ({items = [], totalItems, headingLevel}: Props) => {
+  return <CardViewGrid items={items} headingLevel={headingLevel} totalItems={totalItems} />
 }
 export default SharedTagsCardView

src/components/views/stanford-courses/course-card-view.tsx

@@ -10,9 +10,13 @@ interface Props {
    * If those nodes titles should display as <h2> or <h3>
    */
   headingLevel?: "h2" | "h3"
+  /**
+   * Total number of items to build the pager.
+   */
+  totalItems: number
 }
 
-const CourseCardView = async ({items = [], headingLevel}: Props) => {
-  return <CardViewGrid items={items} headingLevel={headingLevel} />
+const CourseCardView = async ({items = [], headingLevel, totalItems}: Props) => {
+  return <CardViewGrid items={items} headingLevel={headingLevel} totalItems={totalItems} />
 }
 export default CourseCardView

src/components/views/stanford-courses/course-list-view.tsx

@@ -11,9 +11,13 @@ interface Props {
    * If those nodes titles should display as <h2> or <h3>
    */
   headingLevel?: "h2" | "h3"
+  /**
+   * Total number of items on all pages.
+   */
+  totalItems: number
 }
 
-const CourseListView = async ({items = [], headingLevel}: Props) => {
+const CourseListView = async ({items = [], totalItems, headingLevel}: Props) => {
   return (
     <LoadMoreList
       buttonText={
@@ -25,6 +29,7 @@ const CourseListView = async ({items = [], headingLevel}: Props) => {
       liProps={{
         className: "border-b border-black-20 last-of-type:border-0 pb-10 last:pb-0 pt-10 first:pt-0",
       }}
+      totalItems={totalItems}
     >
       {items.map(item => (
         <StanfordCourseListItem key={item.id} node={item} headingLevel={headingLevel} />

src/components/views/stanford-events/events-card-view.tsx

@@ -10,9 +10,13 @@ interface Props {
    * If those nodes titles should display as <h2> or <h3>
    */
   headingLevel?: "h2" | "h3"
+  /**
+   * Total number of items to build the pager.
+   */
+  totalItems: number
 }
 
-const EventsCardView = async ({items = [], headingLevel}: Props) => {
-  return <CardViewGrid items={items} headingLevel={headingLevel} />
+const EventsCardView = async ({items = [], headingLevel, totalItems}: Props) => {
+  return <CardViewGrid items={items} headingLevel={headingLevel} totalItems={totalItems} />
 }
 export default EventsCardView

src/components/views/stanford-events/events-filtered-list-view.tsx

@@ -30,7 +30,15 @@ const getTopicOptions = (
   return topicOptions.sort((a, b) => (a.label < b.label ? -1 : a.label > b.label ? 1 : 0))
 }
 
-const EventsFilteredListView = ({items, topics}: {items: NodeStanfordEvent[]; topics: TermStanfordEventType[]}) => {
+const EventsFilteredListView = ({
+  items,
+  totalItems,
+  topics,
+}: {
+  items: NodeStanfordEvent[]
+  totalItems: number
+  topics: TermStanfordEventType[]
+}) => {
   const [chosenTopic, setChosenTopic] = useState<string>("")
   const [displayedEvents, setDisplayedEvents] = useState<NodeStanfordEvent[]>(items)
 
@@ -88,6 +96,7 @@ const EventsFilteredListView = ({items, topics}: {items: NodeStanfordEvent[]; to
           className: "border-b border-black-20 last-of-type:border-0 pb-10 last:pb-0 pt-10 first:pt-0",
         }}
         itemsPerPage={3}
+        totalItems={totalItems}
       >
         {displayedEvents.map(event => (
           <StanfordEventListItem key={event.id} node={event} />

src/components/views/stanford-events/events-list-view.tsx

@@ -12,16 +12,20 @@ interface Props {
    * If those nodes titles should display as <h2> or <h3>
    */
   headingLevel?: "h2" | "h3"
+  /**
+   * Total number of items on all pages.
+   */
+  totalItems: number
 }
 
-const EventsListView = async ({items = [], headingLevel}: Props) => {
+const EventsListView = async ({items = [], headingLevel, totalItems}: Props) => {
   if (items.length >= 5) {
     const topics: TermStanfordEventType[] = []
     items.map(event => event.suEventType?.map(topic => topics.push(topic)))
     const uniqueTopics = [...new Map(topics.map(t => [t.id, t])).values()]
 
     if (uniqueTopics.length > 1) {
-      return <EventsFilteredListView items={items} topics={uniqueTopics} />
+      return <EventsFilteredListView items={items} topics={uniqueTopics} totalItems={totalItems} />
     }
   }
 
@@ -36,6 +40,7 @@ const EventsListView = async ({items = [], headingLevel}: Props) => {
       liProps={{
         className: "border-b border-black-20 last-of-type:border-0 pb-10 last:pb-0 pt-10 first:pt-0",
       }}
+      totalItems={totalItems}
     >
       {items.map(item => (
         <StanfordEventListItem key={item.id} node={item} headingLevel={headingLevel} />

src/components/views/stanford-news/news-card-view.tsx

@@ -10,9 +10,13 @@ interface Props {
    * If those nodes titles should display as <h2> or <h3>
    */
   headingLevel?: "h2" | "h3"
+  /**
+   * Total number of items to build the pager.
+   */
+  totalItems: number
 }
 
-const NewsCardView = async ({items = [], headingLevel}: Props) => {
-  return <CardViewGrid items={items} headingLevel={headingLevel} />
+const NewsCardView = async ({items = [], headingLevel, totalItems}: Props) => {
+  return <CardViewGrid items={items} headingLevel={headingLevel} totalItems={totalItems} />
 }
 export default NewsCardView

src/components/views/stanford-news/news-list-view.tsx

@@ -22,7 +22,7 @@ interface Props {
   loadPage?: (_page: number) => Promise<JSX.Element>
 }
 
-const NewsListView = async ({items, totalItems, headingLevel, loadPage}: Props) => {
+const NewsListView = async ({items, headingLevel, totalItems, loadPage}: Props) => {
   return (
     <PagedList
       ulProps={{className: "list-unstyled mb-20"}}

src/components/views/stanford-page/page-card-view.tsx

@@ -10,9 +10,13 @@ interface Props {
    * If those nodes titles should display as <h2> or <h3>
    */
   headingLevel?: "h2" | "h3"
+  /**
+   * Total number of items to build the pager.
+   */
+  totalItems: number
 }
 
-const PageCardView = async ({items = [], headingLevel}: Props) => {
-  return <CardViewGrid items={items} headingLevel={headingLevel} />
+const PageCardView = async ({items = [], headingLevel, totalItems}: Props) => {
+  return <CardViewGrid items={items} headingLevel={headingLevel} totalItems={totalItems} />
 }
 export default PageCardView

src/components/views/stanford-page/page-list-view.tsx

@@ -11,15 +11,20 @@ interface Props {
    * If those nodes titles should display as <h2> or <h3>
    */
   headingLevel?: "h2" | "h3"
+  /**
+   * Total number of items on all pages.
+   */
+  totalItems: number
 }
 
-const PageListView = async ({items = [], headingLevel}: Props) => {
+const PageListView = async ({items = [], headingLevel, totalItems}: Props) => {
   return (
     <LoadMoreList
       ulProps={{className: "list-unstyled mb-20"}}
       liProps={{
         className: "border-b border-black-20 last-of-type:border-0 pb-10 last:pb-0 pt-10 first:pt-0",
       }}
+      totalItems={totalItems}
     >
       {items.map(item => (
         <StanfordPageListItem key={item.id} node={item} headingLevel={headingLevel} />

src/components/views/stanford-person/person-card-view.tsx

@@ -10,9 +10,13 @@ interface Props {
    * If those nodes titles should display as <h2> or <h3>
    */
   headingLevel?: "h2" | "h3"
+  /**
+   * Total number of items to build the pager.
+   */
+  totalItems: number
 }
 
-const PersonCardView = async ({items = [], headingLevel}: Props) => {
-  return <CardViewGrid items={items} headingLevel={headingLevel} />
+const PersonCardView = async ({items = [], headingLevel, totalItems}: Props) => {
+  return <CardViewGrid items={items} headingLevel={headingLevel} totalItems={totalItems} />
 }
 export default PersonCardView

src/components/views/stanford-publications/publications-apa-view.tsx

@@ -10,9 +10,13 @@ interface Props {
    * If those nodes titles should display as <h2> or <h3>
    */
   headingLevel?: "h2" | "h3"
+  /**
+   * Total number of items to build the pager.
+   */
+  totalItems: number
 }
 
-const PublicationsApaView = async ({items = [], headingLevel}: Props) => {
-  return <CardViewGrid items={items} headingLevel={headingLevel} />
+const PublicationsApaView = async ({items = [], headingLevel, totalItems}: Props) => {
+  return <CardViewGrid items={items} headingLevel={headingLevel} totalItems={totalItems} />
 }
 export default PublicationsApaView

src/components/views/stanford-publications/publications-chicago-view.tsx

@@ -11,15 +11,20 @@ interface Props {
    * If those nodes titles should display as <h2> or <h3>
    */
   headingLevel?: "h2" | "h3"
+  /**
+   * Total number of items on all pages.
+   */
+  totalItems: number
 }
 
-const PublicationsChicagoView = async ({items = [], headingLevel}: Props) => {
+const PublicationsChicagoView = async ({items = [], headingLevel, totalItems}: Props) => {
   return (
     <LoadMoreList
       ulProps={{className: "list-unstyled mb-20"}}
       liProps={{
         className: "border-b border-black-20 last-of-type:border-0 pb-10 last:pb-0 pt-10 first:pt-0",
       }}
+      totalItems={totalItems}
     >
       {items.map(item => (
         <StanfordPublicationListItem key={item.id} node={item} headingLevel={headingLevel} />