Merge pull request #1751 from seatuna/ctoon/1730/page-load-performance

feat(1760): add loading spinner when navigating to bill details

Author: Mephistic

components/bill/BillDetails.tsx

@@ -17,20 +17,11 @@ import { useTranslation } from "next-i18next"
 import { isCurrentCourt } from "functions/src/shared"
 import { FollowBillButton } from "components/shared/FollowButton"
 import { PendingUpgradeBanner } from "components/PendingUpgradeBanner"
-import { FollowContext, OrgFollowStatus } from "components/shared/FollowContext"
-import { useState } from "react"
 
 const StyledContainer = styled(Container)`
   font-family: "Nunito";
 `
 
-const StyledImage = styled(Image)`
-  width: 14.77px;
-  height: 12.66px;
-
-  margin-left: 8px;
-`
-
 export const BillDetails = ({ bill }: BillProps) => {
   const { t } = useTranslation("common")
 

components/search/bills/BillHit.tsx

@@ -13,7 +13,6 @@ import styled from "styled-components"
 import { Card, Col } from "../../bootstrap"
 import { formatBillId } from "../../formatting"
 import { Timestamp } from "firebase/firestore"
-import { DateTime } from "luxon"
 import { dateInFuture } from "components/db/events"
 
 type BillRecord = {
@@ -132,11 +131,7 @@ export const DisplayUpcomingHearing = ({
 
 export const BillHit = ({ hit }: { hit: Hit<BillRecord> }) => {
   const url = maple.bill({ id: hit.number, court: hit.court })
-  const today = new Date()
   const hearingDate = hit.nextHearingAt && hit.nextHearingAt / 1000 // convert to seconds
-  const isUpcomingHearing = hearingDate
-    ? today < fromUnixTime(hearingDate)
-    : false
 
   return (
     <Link href={url} legacyBehavior>

components/search/bills/BillSearch.tsx

@@ -1,4 +1,4 @@
-import { useTranslation } from "next-i18next"
+import { TFunction, useTranslation } from "next-i18next"
 import {
   CurrentRefinements,
   Hits,
@@ -10,7 +10,7 @@ import {
 import { currentGeneralCourt } from "functions/src/shared"
 import styled from "styled-components"
 import TypesenseInstantSearchAdapter from "typesense-instantsearch-adapter"
-import { Col, Row } from "../../bootstrap"
+import { Col, Container, Row, Spinner } from "../../bootstrap"
 import { NoResults } from "../NoResults"
 import { ResultCount } from "../ResultCount"
 import { SearchContainer } from "../SearchContainer"
@@ -21,8 +21,8 @@ import { useBillRefinements } from "./useBillRefinements"
 import { SortBy, SortByWithConfigurationItem } from "../SortBy"
 import { getServerConfig } from "../common"
 import { useBillSort } from "./useBillSort"
-import { FC } from "react"
 import { useMediaQuery } from "usehooks-ts"
+import { FC, useState } from "react"
 
 const searchClient = new TypesenseInstantSearchAdapter({
   server: getServerConfig(),
@@ -99,6 +99,47 @@ const useSearchStatus = () => {
   }
 }
 
+const StyledLoadingContainer = styled(Container)`
+  background-color: white;
+  display: flex;
+  height: 300px;
+  justify-content: center;
+  align-items: center;
+`
+
+const Results = ({
+  status,
+  t
+}: {
+  status: ReturnType<typeof useSearchStatus>
+  t: TFunction
+}) => {
+  const [isLoadingBillDetails, setIsLoadingBillDetails] = useState(false)
+
+  if (isLoadingBillDetails) {
+    return (
+      <StyledLoadingContainer>
+        <Spinner animation="border" className="mx-auto" />
+      </StyledLoadingContainer>
+    )
+  } else if (status === "empty") {
+    return (
+      <NoResults>
+        {t("zero_results")}
+        <br />
+        <b>{t("another_term")}</b>
+      </NoResults>
+    )
+  } else {
+    return (
+      <Hits
+        hitComponent={BillHit}
+        onClick={() => setIsLoadingBillDetails(true)}
+      />
+    )
+  }
+}
+
 const Layout: FC<
   React.PropsWithChildren<{ items: SortByWithConfigurationItem[] }>
 > = ({ items }) => {
@@ -129,15 +170,7 @@ const Layout: FC<
             excludedAttributes={["nextHearingAt"]}
             transformItems={extractLastSegmentOfRefinements}
           />
-          {status === "empty" ? (
-            <NoResults>
-              {t("zero_results")}
-              <br />
-              <b>{t("another_term")}</b>
-            </NoResults>
-          ) : (
-            <Hits hitComponent={BillHit} />
-          )}
+          <Results status={status} t={t} />
           <Pagination className="mx-auto mt-2 mb-3" />
         </Col>
       </Row>