H-6625: Improve loading, org invites, action bell routing (#8917)

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Author: CiaranMn

apps/hash-api/src/graphql/resolvers/index.ts

@@ -143,6 +143,9 @@ export const resolvers: Omit<Resolvers, "Query" | "Mutation"> & {
     /** Logged in users (who may not have completed signup) */
     me: loggedInMiddleware(meResolver),
     getWaitlistPosition: loggedInMiddleware(getWaitlistPositionResolver),
+    getMyPendingInvitations: loggedInMiddleware(
+      getMyPendingInvitationsResolver,
+    ),
 
     /** Logged in and signed up users */
     getBlockProtocolBlocks: loggedInAndSignedUpMiddleware(
@@ -166,10 +169,6 @@ export const resolvers: Omit<Resolvers, "Query" | "Mutation"> & {
     queryEntitySubgraph: loggedInAndSignedUpMiddleware(
       queryEntitySubgraphResolver,
     ),
-    getMyPendingInvitations: loggedInAndSignedUpMiddleware(
-      getMyPendingInvitationsResolver,
-    ),
-
     getLinearOrganization: loggedInAndSignedUpMiddleware(
       getLinearOrganizationResolver,
     ),

apps/hash-frontend/src/pages/_app.page.tsx

@@ -333,12 +333,7 @@ const featureFlagHiddenPathnames: Record<FeatureFlag, string[]> = {
   notes: ["/notes"],
   workers: ["/goals", "/flows", "/workers", "/agents"],
   ai: ["/goals"],
-  supplyChain: [
-    "/supply-chain",
-    "/supply-chain/product/[product-id]",
-    "/supply-chain/site/[site-id]",
-    "/supply-chain/site/[site-id]/opportunity/[opportunity-type]/[product-id]/[step-id]",
-  ],
+  supplyChain: [],
 };
 
 AppWithTypeSystemContextProvider.getInitialProps = async (appContext) => {

apps/hash-frontend/src/pages/shared/entities-visualizer.tsx

@@ -649,6 +649,7 @@ export const EntitiesVisualizer: FunctionComponent<{
           currentlyDisplayedColumnsRef={currentlyDisplayedColumnsRef}
           currentlyDisplayedRowsRef={currentlyDisplayedRowsRef}
           handleEntityClick={handleEntityClick}
+          hasMoreRowsAvailable={nextCursor != null}
           loading={dataLoading}
           isViewingOnlyPages={isViewingOnlyPages}
           maxHeight={`calc(${tableHeight} - ${toolbarHeight}px)`}

apps/hash-frontend/src/pages/shared/entities-visualizer/entities-table.tsx

@@ -106,6 +106,7 @@ export const EntitiesTable: FunctionComponent<
     loading: boolean;
     isViewingOnlyPages: boolean;
     maxHeight: string | number;
+    hasMoreRowsAvailable: boolean;
     loadMoreRows?: () => void;
     selectedRows: EntitiesTableRow[];
     setActiveConversions: Dispatch<
@@ -136,6 +137,7 @@ export const EntitiesTable: FunctionComponent<
   loading: entityDataLoading,
   isViewingOnlyPages,
   maxHeight,
+  hasMoreRowsAvailable,
   loadMoreRows,
   selectedRows,
   setActiveConversions,
@@ -810,8 +812,6 @@ export const EntitiesTable: FunctionComponent<
     });
   }, [rows.length]);
 
-  const hasMoreRowsAvailable =
-    !!totalResultCount && totalResultCount > rows.length;
   const loadMoreRowHeight = 60;
 
   return (
@@ -906,7 +906,9 @@ export const EntitiesTable: FunctionComponent<
                     component="span"
                     sx={{ color: ({ palette }) => palette.gray[50], ml: 0.5 }}
                   >
-                    - {formatNumber(totalResultCount - rows.length)} remaining
+                    {totalResultCount != null
+                      ? `- ${formatNumber(totalResultCount - rows.length)} remaining`
+                      : ""}
                   </Box>
                   <ArrowDownRegularIcon
                     sx={{

apps/hash-frontend/src/pages/signup.page.tsx

@@ -8,15 +8,18 @@ import { AlertModal, ArrowUpRightRegularIcon } from "@hashintel/design-system";
 import { useUpdateAuthenticatedUser } from "../components/hooks/use-update-authenticated-user";
 import {
   acceptOrgInvitationMutation,
+  getMyPendingInvitationsQuery,
   getPendingInvitationByEntityIdQuery,
 } from "../graphql/queries/knowledge/org.queries";
 import { hasAccessToHashQuery } from "../graphql/queries/user.queries";
+import { useInvites } from "../shared/invites-context";
 import { getPlainLayout } from "../shared/layout";
 import { Button } from "../shared/ui";
 import { useAuthInfo } from "./shared/auth-info-context";
 import { AuthLayout } from "./shared/auth-layout";
 import { parseGraphQLError } from "./shared/auth-utils";
 import { VerifyEmailStep } from "./shared/verify-email-step";
+import { useActiveWorkspace } from "./shared/workspace-context";
 import { AcceptOrgInvitation } from "./signup.page/accept-org-invitation";
 import { AccountSetupForm } from "./signup.page/account-setup-form";
 import { SignupRegistrationForm } from "./signup.page/signup-registration-form";
@@ -26,6 +29,8 @@ import { SignupSteps } from "./signup.page/signup-steps";
 import type {
   AcceptOrgInvitationMutation,
   AcceptOrgInvitationMutationVariables,
+  GetMyPendingInvitationsQuery,
+  GetMyPendingInvitationsQueryVariables,
   GetPendingInvitationByEntityIdQuery,
   GetPendingInvitationByEntityIdQueryVariables,
   HasAccessToHashQuery,
@@ -95,6 +100,8 @@ const SignupPage: NextPageWithLayout = () => {
 
   const { authenticatedUser, refetch: refetchAuthenticatedUser } =
     useAuthInfo();
+  const { refetch: refetchInvites } = useInvites();
+  const { updateActiveWorkspaceWebId } = useActiveWorkspace();
 
   const userHasVerifiedEmail =
     authenticatedUser?.emails.find(({ verified }) => verified) !== undefined;
@@ -139,12 +146,24 @@ const SignupPage: NextPageWithLayout = () => {
     skip: !invitationId,
   });
 
+  const { data: pendingInvitationsData, loading: pendingInvitationsLoading } =
+    useQuery<
+      GetMyPendingInvitationsQuery,
+      GetMyPendingInvitationsQueryVariables
+    >(getMyPendingInvitationsQuery, {
+      skip: !!invitationId || !authenticatedUser || !userHasVerifiedEmail,
+    });
+
   const [acceptInvitation] = useMutation<
     AcceptOrgInvitationMutation,
     AcceptOrgInvitationMutationVariables
   >(acceptOrgInvitationMutation);
 
-  const invitation = invitationData?.getPendingInvitationByEntityId;
+  const invitation =
+    invitationData?.getPendingInvitationByEntityId ??
+    pendingInvitationsData?.getMyPendingInvitations[0];
+
+  const loadingInvitation = invitationLoading || pendingInvitationsLoading;
 
   const [acceptingInvitation, setAcceptingInvitation] = useState(false);
   const acceptingInvitationEntityIdRef = useRef<EntityId | undefined>(
@@ -220,7 +239,9 @@ const SignupPage: NextPageWithLayout = () => {
     })
       .then(async (result) => {
         if (result?.accepted || result?.alreadyAMember) {
+          refetchInvites();
           await refetchAuthenticatedUser();
+          updateActiveWorkspaceWebId(invitation.org.webId);
           void router.replace("/");
           return;
         }
@@ -245,15 +266,17 @@ const SignupPage: NextPageWithLayout = () => {
     clearInvitationAcceptanceReservation,
     invitation,
     refetchAuthenticatedUser,
+    refetchInvites,
     router,
+    updateActiveWorkspaceWebId,
   ]);
 
   useEffect(() => {
     if (
       router.isReady &&
       authenticatedUser?.accountSignupComplete &&
       invitationId &&
-      !invitationLoading &&
+      !loadingInvitation &&
       !invitation &&
       !acceptingInvitation
     ) {
@@ -264,7 +287,7 @@ const SignupPage: NextPageWithLayout = () => {
     authenticatedUser?.accountSignupComplete,
     invitation,
     invitationId,
-    invitationLoading,
+    loadingInvitation,
     router,
   ]);
 
@@ -340,15 +363,21 @@ const SignupPage: NextPageWithLayout = () => {
       }
 
       await refetchAuthenticatedUser();
+      refetchInvites();
+      if (invitation) {
+        updateActiveWorkspaceWebId(invitation.org.webId);
+      }
 
       void router.push("/");
     },
     [
       acceptInvitationOnce,
       clearInvitationAcceptanceReservation,
       invitation,
+      refetchInvites,
       refetchAuthenticatedUser,
       updateAuthenticatedUser,
+      updateActiveWorkspaceWebId,
       router,
     ],
   );
@@ -395,7 +424,9 @@ const SignupPage: NextPageWithLayout = () => {
       >
         <Grid container columnSpacing={16}>
           <Grid item xs={12} md={7}>
-            {invitationLoading ? null : invitation && showInvitationStep ? (
+            {loadingInvitation ? null : invitation &&
+              showInvitationStep &&
+              !authenticatedUser ? (
               <AcceptOrgInvitation
                 invitation={invitation}
                 onAccept={() => setShowInvitationStep(false)}

apps/hash-frontend/src/pages/supply-chain/product/[product-id].page.tsx

@@ -4,7 +4,7 @@ import { useCallback, useEffect, useState } from "react";
 import { css } from "@hashintel/ds-helpers/css";
 
 import { fetchGraph } from "../shared/data";
-import { ErrorState, LoadingState } from "../shared/load-state";
+import { ErrorState, SupplyChainAppSkeleton } from "../shared/load-state";
 import { getSupplyChainLayout } from "../shared/supply-chain-layout";
 import {
   trackSupplyChainError,
@@ -16,7 +16,6 @@ import { Overview } from "../supply-chain-data-shell/product";
 import type { NextPageWithLayout } from "../../../shared/layout";
 import type { GraphData } from "../shared/types";
 
-const loadingH = css({ h: "64" });
 const errorPad = css({ px: "6", py: "4" });
 
 const ProductPage: NextPageWithLayout = () => {
@@ -79,9 +78,7 @@ const ProductPage: NextPageWithLayout = () => {
   }, [productId]);
 
   if (loading) {
-    return (
-      <LoadingState message="Loading product data..." className={loadingH} />
-    );
+    return <SupplyChainAppSkeleton />;
   }
   if (error) {
     return <ErrorState message={error} className={errorPad} />;

apps/hash-frontend/src/pages/supply-chain/shared/load-state.tsx

@@ -14,6 +14,43 @@ const loadingRow = css({
 });
 const loadingText = css({ textStyle: "sm", color: "fg.subtle" });
 const errorText = css({ textStyle: "sm", color: "status.error.fg.body" });
+const appSkeletonRoot = css({
+  display: "flex",
+  flexDirection: "column",
+  flex: "1",
+  minH: "0",
+  h: "full",
+  w: "full",
+  bg: "bgSolid.min",
+});
+const appSkeletonTopBar = css({
+  display: "flex",
+  alignItems: "center",
+  px: "6",
+  py: "3",
+  borderBottomWidth: "1px",
+  borderColor: "bd.subtle",
+  flexShrink: 0,
+});
+const appSkeletonSitePicker = css({
+  h: "10",
+  w: "64",
+  maxW: "[min(260px,45vw)]",
+  rounded: "md",
+  bg: "bg.subtle",
+});
+const appSkeletonContent = css({
+  flex: "1",
+  minH: "0",
+  p: "6",
+  display: "flex",
+});
+const appSkeletonContentBlock = css({
+  flex: "1",
+  minH: "[280px]",
+  rounded: "lg",
+  bg: "bg.subtle",
+});
 
 /** Centered, muted "loading…" message with a ds spinner. Size the area via `className` (e.g. `h-32`). */
 export const LoadingState = ({
@@ -33,6 +70,26 @@ export const LoadingState = ({
   );
 };
 
+/** Supply-chain route loading skeleton matching the page chrome. */
+export const SupplyChainAppSkeleton = ({
+  className,
+}: {
+  className?: string;
+}) => (
+  <div
+    aria-label="Loading"
+    className={cx(appSkeletonRoot, className)}
+    role="status"
+  >
+    <div className={appSkeletonTopBar}>
+      <div className={appSkeletonSitePicker} />
+    </div>
+    <div className={appSkeletonContent}>
+      <div className={appSkeletonContentBlock} />
+    </div>
+  </div>
+);
+
 /** Inline error message. Pad/position via `className` (e.g. `px-6 py-4`). */
 export const ErrorState = ({
   message,

apps/hash-frontend/src/pages/supply-chain/shared/supply-chain-layout.tsx

@@ -1,25 +1,15 @@
 import { useRef } from "react";
 
 import { PortalContainerContext } from "@hashintel/ds-components";
-import { css } from "@hashintel/ds-helpers/css";
 
 import { getLayoutWithSidebar } from "../../../shared/layout";
 import { HEADER_HEIGHT } from "../../../shared/layout/layout-with-header/page-header";
 import { useActiveWorkspace } from "../../shared/workspace-context";
 import { SupplyChainDataShell } from "../supply-chain-data-shell";
-import { LoadingState } from "./load-state";
+import { SupplyChainAppSkeleton } from "./load-state";
 
 import type { ReactElement, ReactNode } from "react";
 
-const emptyState = css({
-  h: "full",
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  color: "fg.subtle",
-  textStyle: "sm",
-});
-
 /**
  * Layout shared by every `/supply-chain/*` page.
  *
@@ -46,7 +36,7 @@ const SupplyChainShell = ({ children }: { children: ReactNode }) => {
         }}
       >
         {activeWorkspaceWebId === undefined ? (
-          <LoadingState className={emptyState} message="Loading workspace..." />
+          <SupplyChainAppSkeleton />
         ) : (
           <SupplyChainDataShell
             key={activeWorkspaceWebId}

apps/hash-frontend/src/pages/supply-chain/site/[site-id]/opportunity/[opportunity-type]/[product-id]/[step-id].page.tsx

@@ -1,7 +1,10 @@
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 
-import { LoadingState, ErrorState } from "../../../../../shared/load-state";
+import {
+  ErrorState,
+  SupplyChainAppSkeleton,
+} from "../../../../../shared/load-state";
 import { useRegistry } from "../../../../../shared/registry-context";
 import { getSupplyChainLayout } from "../../../../../shared/supply-chain-layout";
 import {
@@ -55,7 +58,7 @@ const OpportunityPage: NextPageWithLayout = () => {
   }, [opportunityType, productId, siteId, stepId]);
 
   if (!router.isReady) {
-    return <LoadingState message="Loading opportunity brief..." />;
+    return <SupplyChainAppSkeleton />;
   }
 
   if (!siteId || !productId || !stepId) {