add document actions loading skeleton

src/components/DocumentCard.tsx

@@ -4,11 +4,17 @@ import RouterLink from 'next/link'
 import { LocalDocumentRevision, User, UserDocument } from '@/types';
 import { memo } from 'react';
 import { SxProps, Theme } from '@mui/material/styles';
-import { Card, CardActionArea, CardHeader, Skeleton, Typography, Avatar, CardActions, Chip, Badge, NoSsr } from '@mui/material';
-import { Article, MobileFriendly, Cloud, Public, Workspaces, Security, CloudDone, CloudSync } from '@mui/icons-material';
-
+import { Card, CardActionArea, CardHeader, Skeleton, Typography, Avatar, CardActions, Chip, Badge, NoSsr, IconButton } from '@mui/material';
+import { Article, MobileFriendly, Cloud, Public, Workspaces, Security, CloudDone, CloudSync, MoreVert, Share } from '@mui/icons-material';
 import dynamic from "next/dynamic";
-const DocumentActionMenu = dynamic(() => import('@/components/DocumentActions/ActionMenu'), { ssr: false });
+const DocumentActionMenu = dynamic(() => import('@/components/DocumentActions/ActionMenu'),
+  {
+    ssr: false,
+    loading: () => <>
+      <IconButton aria-label="Share Document" size="small"><Share /></IconButton>
+      <IconButton aria-label='Document Actions' size="small"><MoreVert /></IconButton>
+    </>
+  });
 
 const DocumentCard: React.FC<{ userDocument?: UserDocument, user?: User, sx?: SxProps<Theme> | undefined }> = memo(({ userDocument, user, sx }) => {
   const localDocument = userDocument?.local;
@@ -75,8 +81,12 @@ const DocumentCard: React.FC<{ userDocument?: UserDocument, user?: User, sx?: Sx
         />
       </CardActionArea>
       <CardActions sx={{ height: 50, "& button:first-of-type": { ml: "auto !important" }, '& .MuiChip-root:last-of-type': { mr: 1 } }}>
-        {!document && <Chip sx={{ width: 0, flex: 1, maxWidth: "fit-content" }} label={<Skeleton variant="text" width={50} />} />}
-        {!document && <Chip sx={{ width: 0, flex: 1, maxWidth: "fit-content" }} label={<Skeleton variant="text" width={70} />} />}
+        {!userDocument && <>
+          <Chip sx={{ width: 0, flex: 1, maxWidth: "fit-content" }} label={<Skeleton variant="text" width={50} />} />
+          <Chip sx={{ width: 0, flex: 1, maxWidth: "fit-content" }} label={<Skeleton variant="text" width={70} />} />
+          <IconButton aria-label="Share Document" size="small" disabled><Share /></IconButton>
+          <IconButton aria-label='Document Actions' size="small" disabled><MoreVert /></IconButton>
+        </>}
         {isLocalOnly && <Chip sx={{ width: 0, flex: 1, maxWidth: "fit-content" }} icon={<MobileFriendly />} label="Local" />}
         {isUploaded && <Chip sx={{ width: 0, flex: 1, maxWidth: "fit-content" }} icon={isUpToDate ? <CloudDone /> : <CloudSync />} label={isUpToDate ? "Synced" : "Out of Sync"} />}
         {isCloudOnly && (isAuthor || isCoauthor) && <Chip sx={{ width: 0, flex: 1, maxWidth: "fit-content" }} icon={<Cloud />} label="Cloud" />}