packageEdit: don't load data on SSR loader

The page requires authentication and authorization, and the SSR
rendering half a form that's shown to user while the client side checks
for permissions is just bad UX.

Instead, return undefined so the component renders immediately and show
a skeleton component to user.

Author: anttimaki

apps/cyberstorm-remix/app/p/packageEdit.css

@@ -85,4 +85,8 @@
   .package-edit__save-button {
     flex: 1 0 0;
   }
+
+  .package-edit__skeleton {
+    min-height: 20rem;
+  }
 }

apps/cyberstorm-remix/app/p/packageEdit.tsx

@@ -6,6 +6,7 @@ import {
   NewIcon,
   NewSelectSearch,
   NewTag,
+  SkeletonBox,
   formatToDisplayName,
   useToast,
 } from "@thunderstore/cyberstorm";
@@ -19,18 +20,15 @@ import {
 } from "@thunderstore/thunderstore-api";
 import { DapperTs } from "@thunderstore/dapper-ts";
 import { type OutletContextShape } from "~/root";
-import {
-  getPublicEnvVariables,
-  getSessionTools,
-} from "cyberstorm/security/publicEnvVariables";
+import { getSessionTools } from "cyberstorm/security/publicEnvVariables";
 import { PageHeader } from "~/commonComponents/PageHeader/PageHeader";
 import { useStrongForm } from "cyberstorm/utils/StrongForm/useStrongForm";
 import { useReducer } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBan, faCheck } from "@fortawesome/pro-solid-svg-icons";
 import { ApiAction } from "@thunderstore/ts-api-react-actions";
 
-export const meta: MetaFunction<typeof loader> = ({ data }) => {
+export const meta: MetaFunction<typeof clientLoader> = ({ data }) => {
   return [
     {
       title: data
@@ -43,32 +41,7 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
 const package404 = new Response("Package not found", { status: 404 });
 
 export async function loader({ params }: LoaderFunctionArgs) {
-  const { communityId, namespaceId, packageId } = params;
-
-  if (!communityId || !namespaceId || !packageId) {
-    throw package404;
-  }
-
-  try {
-    const publicEnvVariables = getPublicEnvVariables(["VITE_API_URL"]);
-    const dapper = new DapperTs(() => {
-      return {
-        apiHost: publicEnvVariables.VITE_API_URL,
-        sessionId: undefined,
-      };
-    });
-    return {
-      listing: await dapper.getPackageListingDetails(
-        communityId,
-        namespaceId,
-        packageId
-      ),
-      filters: await dapper.getCommunityFilters(communityId),
-      permissions: undefined,
-    };
-  } catch (error) {
-    throw error instanceof ApiError ? package404 : error;
-  }
+  return undefined;
 }
 
 // TODO: Needs to check if package is available for the logged in user
@@ -120,10 +93,7 @@ export async function clientLoader({ params }: LoaderFunctionArgs) {
 clientLoader.hydrate = true;
 
 export default function PackageListing() {
-  const { listing, filters, permissions } = useLoaderData<
-    typeof loader | typeof clientLoader
-  >();
-
+  const loaderData = useLoaderData<typeof loader | typeof clientLoader>();
   const outletContext = useOutletContext() as OutletContextShape;
   const config = outletContext.requestConfig;
   const toast = useToast();
@@ -183,7 +153,7 @@ export default function PackageListing() {
   }
 
   const [formInputs, updateFormFieldState] = useReducer(formFieldUpdateAction, {
-    categories: listing.categories.map((c) => c.slug),
+    categories: loaderData?.listing.categories.map((c) => c.slug) ?? [],
   });
 
   type SubmitorOutput = Awaited<ReturnType<typeof packageListingUpdate>>;
@@ -231,14 +201,20 @@ export default function PackageListing() {
     },
   });
 
+  if (!loaderData) {
+    return <SkeletonBox className="package-edit__skeleton" />;
+  }
+
+  const { listing, filters, permissions } = loaderData;
+
   return (
     <>
       <PageHeader headingLevel="1" headingSize="2">
         Edit package
       </PageHeader>
       <div className="package-edit__main">
         <section className="package-edit__section">
-          {permissions?.permissions.can_unlist ? (
+          {permissions.permissions.can_unlist && (
             <>
               <div className="package-edit__row">
                 <div className="package-edit__info">
@@ -278,8 +254,8 @@ export default function PackageListing() {
               </div>
               <div className="package-edit__divider" />
             </>
-          ) : null}
-          {permissions?.permissions.can_manage_deprecation ? (
+          )}
+          {permissions.permissions.can_manage_deprecation && (
             <>
               <div className="package-edit__row">
                 <div className="package-edit__info">
@@ -329,7 +305,7 @@ export default function PackageListing() {
               </div>
               <div className="package-edit__divider" />
             </>
-          ) : null}
+          )}
           <div className="package-edit__row">
             <div className="package-edit__info">
               <div className="package-edit__title">Categories</div>