@rapidmx/web-client 0.10.0 → 0.12.0

package/apps/shared/components/mail/LazyReadingPane.tsx

@@ -5,7 +5,7 @@
 import React, { ComponentType, useEffect, useState } from "react";
 import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import Button from "@rapidmx/react-shared/components/buttons/Button.js";
-import Skeleton from "@rapidmx/react-shared/components/feedback/Skeleton.js";
+import { ReadingPaneSkeleton } from "./reading/MessageCard.js";
 import type MessageDetailPaneType from "./MessageDetailPane.js";
 import type ConversationThreadPaneType from "./ConversationThreadPane.js";
 
@@ -21,7 +21,7 @@ import type ConversationThreadPaneType from "./ConversationThreadPane.js";
  * code was already fetched. This reads the loaded component synchronously when there is one, so an already-loaded pane renders
  * on the click's own frame, and it can retry a failed download.
  */
-function lazyComponent<P extends object>(load: () => Promise<{ default: ComponentType<P> }>) {
+function lazyComponent<P extends object>(load: () => Promise<{ default: ComponentType<P> }>, skeleton: (props: P) => React.ReactNode) {
     let loaded: ComponentType<P> | undefined;
     let loading: Promise<ComponentType<P>> | undefined;
 
@@ -57,23 +57,12 @@ function lazyComponent<P extends object>(load: () => Promise<{ default: Componen
             const Component = loaded;
             return <Component {...props} />;
         }
-        return failed ? <ChunkFailed /> : <PaneSkeleton />;
+        return failed ? <ChunkFailed /> : skeleton(props);
     }
 
     return { Lazy, start };
 }
 
-function PaneSkeleton() {
-    return (
-        <div role="status" aria-busy="true" className="flex-1 p-6 flex flex-col gap-3">
-            <span className="sr-only">Loading the message</span>
-            <Skeleton width="w-2/3" height="h-6" />
-            <Skeleton width="w-1/3" />
-            <Skeleton height="h-40" />
-        </div>
-    );
-}
-
 /** A chunk that can't be downloaded (offline, or replaced by a deploy since this page loaded) is the one failure a reading
  * pane can't recover from by itself: say so, with the fix, rather than leaving a blank pane. */
 function ChunkFailed() {
@@ -89,8 +78,17 @@ function ChunkFailed() {
     );
 }
 
-const messageDetailPane = lazyComponent<React.ComponentProps<typeof MessageDetailPaneType>>(() => import("./MessageDetailPane.js"));
-const conversationThreadPane = lazyComponent<React.ComponentProps<typeof ConversationThreadPaneType>>(() => import("./ConversationThreadPane.js"));
+// While the code loads the pane already draws its frame - the header card with the subject the list row knows, and a card of placeholder lines - so
+// the click is answered on its own frame and the messages only fill in.
+const messageDetailPane = lazyComponent<React.ComponentProps<typeof MessageDetailPaneType>>(
+    () => import("./MessageDetailPane.js"),
+    // `LazyMessageDetailPane` renders the empty state, not this, for no message.
+    (props) => <ReadingPaneSkeleton subject={props.message!.subject} />,
+);
+const conversationThreadPane = lazyComponent<React.ComponentProps<typeof ConversationThreadPaneType>>(
+    () => import("./ConversationThreadPane.js"),
+    (props) => <ReadingPaneSkeleton subject={props.conversation!.subject} messageCount={props.conversation!.messageCount} />,
+);
 
 /** Starts downloading the reading pane's code, for the page to call when it has nothing better to do. Never rejects. */
 export function prefetchReadingPane(): void {

package/apps/shared/components/mail/MailSelectionBar.tsx

@@ -5,7 +5,6 @@
 import React, { useState } from "react";
 import { Folder, Message } from "@rapidmx/react-shared/mail/mailApi.js";
 import { Label } from "@rapidmx/react-shared/mail/labelsApi.js";
-import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
 import LabelMenuButton from "./labelMenu.js";
 import MoveToFolderDialog, { MOVE_TARGET_TYPES } from "./MoveToFolderDialog.js";
 import { ariaKeyShortcuts, withHint } from "../../keyboard/format.js";
@@ -43,15 +42,14 @@ export interface MailSelectionBarProps {
     onArchive: () => void;
     /** Moves the selection into `folderUid`, resolving once the bulk update has settled. It resolves
      * whether or not that update was rejected: a bulk update is applied element by element, so a failure
-     * is explained in this bar (along with the reload it triggers) rather than in the prompt, which would
-     * be claiming the move simply didn't happen. */
+     * is explained by a pop-up (see `notifyApiError()`), raised by the page along with the reload it triggers, rather than in the
+     * prompt, which would be claiming the move simply didn't happen. */
     onMoveTo: (folderUid: string) => Promise<void>;
     onReportJunk: () => void;
     onDelete: () => void;
     /** A bulk action is in flight - every action is held until it settles, since the next one would send
      * `version`s the first has already superseded. */
     busy: boolean;
-    error: string | null;
     /** The keyboard acts on this selection (Delete, Ctrl+Q, Ctrl+U, Insert - registered by the page): Mark read, Mark unread, Flag and
      * Delete name their shortcut in the tooltip and `aria-keyshortcuts`. */
     shortcuts?: boolean;
@@ -92,7 +90,6 @@ export default function MailSelectionBar({
     onReportJunk,
     onDelete,
     busy,
-    error,
     shortcuts,
 }: MailSelectionBarProps) {
     const env = useKeyEnvironment();
@@ -225,11 +222,6 @@ export default function MailSelectionBar({
                     Delete
                 </button>
             </div>
-            {error && (
-                <div className="px-3 pb-2">
-                    <Alert>{error}</Alert>
-                </div>
-            )}
         </div>
     );
 }