Publisher pages lazy import, pt6 (#5477)

* feature: lazy load more brand store pages

* fix: ignore AbortError when using AbourController.abort()

Author: edisile

static/js/publisher/index.tsx

@@ -10,10 +10,6 @@ import PublisherLayout from "./layouts/PublisherLayout";
 import SnapsManagementLayout from "./layouts/SnapsManagementLayout";
 import ModelDetailsPageLayout from "./layouts/ModelDetailsPageLayout/ModelPageLayout";
 
-import BrandStoreSettings from "./pages/BrandStoreSettings";
-import Members from "./pages/Members";
-import SigningKeys from "./pages/SigningKeys";
-import Snaps from "./pages/Snaps";
 import ValidationSet from "./pages/ValidationSet";
 import ValidationSets from "./pages/ValidationSets";
 import AccountKeys from "./pages/AccountKeys";
@@ -39,6 +35,12 @@ const RequestReservedName = importComponent(
 const Models = importComponent(() => import("./pages/Models"));
 const Model = importComponent(() => import("./pages/Model"));
 const Policies = importComponent(() => import("./pages/Model/Policies"));
+const BrandStoreSettings = importComponent(
+  () => import("./pages/BrandStoreSettings"),
+);
+const Members = importComponent(() => import("./pages/Members"));
+const SigningKeys = importComponent(() => import("./pages/SigningKeys"));
+const Snaps = importComponent(() => import("./pages/Snaps"));
 
 Sentry.init({
   dsn: window.SENTRY_DSN,

static/js/publisher/pages/BrandStoreSettings/BrandStoreSettings.tsx

@@ -4,12 +4,12 @@ import { useQuery } from "react-query";
 import {
   Row,
   Col,
-  Spinner,
   Form,
   Input,
   PasswordToggle,
   Button,
 } from "@canonical/react-components";
+import Loader from "../../components/Loader";
 
 function BrandStoreSettings() {
   const { id } = useParams();
@@ -60,11 +60,7 @@ function BrandStoreSettings() {
 
   return (
     <>
-      {isLoading && (
-        <div className="u-fixed-width">
-          <Spinner text="Loading..." />
-        </div>
-      )}
+      {isLoading && <Loader />}
 
       {!isLoading && status === "success" && data && (
         <>

static/js/publisher/pages/Snaps/Snaps.tsx

@@ -2,7 +2,6 @@ import { useState, useEffect } from "react";
 import { useParams, Link } from "react-router-dom";
 import { useAtomValue } from "jotai";
 import {
-  Spinner,
   Row,
   Col,
   Button,
@@ -26,6 +25,7 @@ import IncludedSnapsTable from "./IncludedSnapsTable";
 import { setPageTitle } from "../../utils";
 import type { Store, Snap, SnapsList, Member } from "../../types/shared";
 import { PortalEntrance } from "../Portals/Portals";
+import Loader from "../../components/Loader";
 
 function Snaps() {
   const { id } = useParams();
@@ -326,9 +326,7 @@ function Snaps() {
   return (
     <>
       {snapsLoading && membersLoading ? (
-        <div className="u-fixed-width">
-          <Spinner text="Loading&hellip;" />
-        </div>
+        <Loader />
       ) : currentStore && isReviewerAndPublisherOnly ? (
         <ReviewerAndPublisher />
       ) : currentStore && isReviewerOnly ? (
@@ -362,7 +360,7 @@ function Snaps() {
             </>
           )}
           <div className="u-fixed-width">
-            {isReloading && <Spinner text="Loading&hellip;" />}
+            {isReloading && <Loader />}
 
             {!isReloading && currentStore && (
               <>

static/js/publisher/utils/getPolicies.ts

@@ -23,7 +23,15 @@ const getPolicies = async ({
         signal,
       });
     }),
-  );
+  ).catch((e: Error) => {
+    if (e instanceof DOMException && e.name == "AbortError") {
+      // swallow the error because it's actually deliberate
+    } else {
+      console.error(e);
+    }
+  });
+
+  if (!data) return;
 
   const allPolicies = await Promise.all(
     data.map(async (res) => {