Updated dependencies

package.json

@@ -20,19 +20,19 @@
     "@mui/base": "^5.0.0-dev.20240529-082515-213b5e33ab",
     "@next/third-parties": "^14.2.4",
     "@tailwindcss/container-queries": "^0.1.1",
-    "@types/node": "^20.14.5",
+    "@types/node": "^20.14.9",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "algoliasearch": "^4.23.3",
+    "algoliasearch": "^4.24.0",
     "autoprefixer": "^10.4.19",
     "axios": "^1.7.2",
     "clsx": "^2.1.1",
     "decanter": "^7.3.0",
     "drupal-jsonapi-params": "^2.3.1",
     "eslint": "^8.57.0",
     "eslint-config-next": "^14.2.4",
-    "graphql": "^16.8.2",
-    "graphql-request": "^7.0.1",
+    "graphql": "^16.9.0",
+    "graphql-request": "^7.1.0",
     "graphql-tag": "^2.12.6",
     "html-entities": "^2.5.2",
     "html-react-parser": "^5.1.10",
@@ -43,14 +43,14 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-focus-lock": "^2.12.1",
-    "react-instantsearch": "^7.11.2",
-    "react-instantsearch-nextjs": "^0.3.3",
+    "react-instantsearch": "^7.11.4",
+    "react-instantsearch-nextjs": "^0.3.4",
     "react-slick": "^0.30.2",
     "react-tiny-oembed": "^1.1.0",
     "sharp": "^0.33.4",
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.4",
-    "typescript": "^5.4.5",
+    "typescript": "^5.5.2",
     "usehooks-ts": "^3.1.0"
   },
   "devDependencies": {
@@ -60,13 +60,13 @@
     "@graphql-codegen/typescript-graphql-request": "^6.2.0",
     "@graphql-codegen/typescript-operations": "^4.2.1",
     "@next/bundle-analyzer": "^14.2.4",
-    "@storybook/addon-essentials": "^8.1.10",
-    "@storybook/addon-interactions": "^8.1.10",
-    "@storybook/addon-links": "^8.1.10",
+    "@storybook/addon-essentials": "^8.1.11",
+    "@storybook/addon-interactions": "^8.1.11",
+    "@storybook/addon-links": "^8.1.11",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/blocks": "^8.1.10",
-    "@storybook/nextjs": "^8.1.10",
-    "@storybook/react": "^8.1.10",
+    "@storybook/blocks": "^8.1.11",
+    "@storybook/nextjs": "^8.1.11",
+    "@storybook/react": "^8.1.11",
     "@storybook/testing-library": "^0.2.2",
     "@types/react-slick": "^0.23.13",
     "concurrently": "^8.2.2",
@@ -77,7 +77,7 @@
     "prettier": "^3.3.2",
     "prettier-plugin-tailwindcss": "^0.6.5",
     "react-docgen": "^7.0.3",
-    "storybook": "^8.1.10",
+    "storybook": "^8.1.11",
     "tsconfig-paths-webpack-plugin": "^4.1.0"
   },
   "packageManager": "[email protected]"

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

@@ -41,4 +41,28 @@ const NewsListView = async ({items, totalItems, headingLevel, loadPage}: Props)
     </PagedList>
   )
 }
+
+export const NewsListSkeleton = () => {
+  return (
+    <div>
+      <div className="flex min-h-[200px] items-center justify-between border-b border-black-20 pb-10">
+        <div className="flex-grow">
+          <div className="mb-5 h-7 w-1/3 bg-black-10" />
+          <div className="mb-10 h-16 w-1/2 bg-black-10" />
+          <div className="mb-5 h-7 w-1/3 bg-black-10" />
+        </div>
+        <div className="relative order-1 mb-10 aspect-[16/9] shrink-0 bg-black-10 @3xl:order-2 @3xl:mb-0 @3xl:w-1/4" />
+      </div>
+      <div className="flex min-h-[150px] items-center justify-between pt-10">
+        <div className="flex-grow">
+          <div className="mb-5 h-7 w-1/3 bg-black-10" />
+          <div className="mb-10 h-16 w-1/2 bg-black-10" />
+          <div className="mb-5 h-7 w-1/3 bg-black-10" />
+        </div>
+        <div className="relative order-1 mb-10 aspect-[16/9] shrink-0 bg-black-10 @3xl:order-2 @3xl:mb-0 @3xl:w-1/4" />
+      </div>
+    </div>
+  )
+}
+
 export default NewsListView

src/components/views/view.tsx

@@ -1,8 +1,8 @@
-import {JSX} from "react"
+import {JSX, Suspense} from "react"
 import SharedTagsCardView from "@components/views/shared-tags/shared-tags-card-view"
 import PageListView from "@components/views/stanford-page/page-list-view"
 import NewsCardView from "@components/views/stanford-news/news-card-view"
-import NewsListView from "@components/views/stanford-news/news-list-view"
+import NewsListView, {NewsListSkeleton} from "@components/views/stanford-news/news-list-view"
 import PersonCardView from "@components/views/stanford-person/person-card-view"
 import EventsCardView from "@components/views/stanford-events/events-card-view"
 import EventsListView from "@components/views/stanford-events/events-list-view"
@@ -62,12 +62,14 @@ const View = async ({viewId, displayId, items, totalItems, loadPage, headingLeve
 
     case "stanford_news--block_1":
       return (
-        <NewsListView
-          items={items as NodeStanfordNews[]}
-          headingLevel={headingLevel}
-          loadPage={loadPage}
-          totalItems={totalItems}
-        />
+        <Suspense fallback={<NewsListSkeleton />}>
+          <NewsListView
+            items={items as NodeStanfordNews[]}
+            headingLevel={headingLevel}
+            loadPage={loadPage}
+            totalItems={totalItems}
+          />
+        </Suspense>
       )
 
     case "stanford_person--grid_list_all":