* add skeleton pulse animation

* add translation strings
* fix attachment view responsiveness

apps/client/public/locales/en-US/translation.json

@@ -328,6 +328,8 @@
   "Upload any image from your device.": "Upload any image from your device.",
   "Upload any video from your device.": "Upload any video from your device.",
   "Upload any file from your device.": "Upload any file from your device.",
+  "Uploading {{name}}": "Uploading {{name}}",
+  "Uploading file": "Uploading file",
   "Table": "Table",
   "Insert a table.": "Insert a table.",
   "Insert collapsible block.": "Insert collapsible block.",

apps/client/src/features/editor/components/attachment/attachment-view.tsx

@@ -4,8 +4,10 @@ import { getFileUrl } from "@/lib/config.ts";
 import { IconDownload, IconPaperclip } from "@tabler/icons-react";
 import { useHover } from "@mantine/hooks";
 import { formatBytes } from "@/lib";
+import { useTranslation } from "react-i18next";
 
 export default function AttachmentView(props: NodeViewProps) {
+  const { t } = useTranslation();
   const { node, selected } = props;
   const { url, name, size } = node.attrs;
   const { hovered, ref } = useHover();
@@ -20,14 +22,18 @@ export default function AttachmentView(props: NodeViewProps) {
           wrap="nowrap"
           h={25}
         >
-          <Group justify="space-between" wrap="nowrap">
+          <Group wrap="nowrap" gap="sm" style={{ minWidth: 0, flex: 1 }}>
-            {url ? <IconPaperclip size={20} /> : <Loader size={20} />}
+            {url ? (
+              <IconPaperclip size={20} style={{ flexShrink: 0 }} />
+            ) : (
+              <Loader size={20} style={{ flexShrink: 0 }} />
+            )}
 
-            <Text component="span" size="md" truncate="end">
+            <Text component="span" size="md" truncate="end" style={{ minWidth: 0 }}>
-              {url ? name : `Uploading ${name}...`}
+              {url ? name : t("Uploading {{name}}", { name })}
             </Text>
 
-            <Text component="span" size="sm" c="dimmed" inline>
+            <Text component="span" size="sm" c="dimmed" style={{ flexShrink: 0 }}>
               {formatBytes(size)}
             </Text>
           </Group>

apps/client/src/features/editor/components/image/image-view.module.css

@@ -3,11 +3,25 @@
   justify-content: center;
   align-items: center;
   border-radius: 8px;
+  overflow: hidden;
+  animation: pulse 1.2s ease-in-out infinite;
+
   @mixin light {
-    background-color: var(--mantine-color-gray-0);
+    background: linear-gradient(-90deg, var(--mantine-color-gray-3) 0%, var(--mantine-color-gray-1) 50%, var(--mantine-color-gray-3) 100%);
+    background-size: 400% 400%;
   }
 
   @mixin dark {
-    background-color: var(--mantine-color-dark-7);
+    background: linear-gradient(-90deg, var(--mantine-color-dark-6) 0%, var(--mantine-color-dark-5) 50%, var(--mantine-color-dark-6) 100%);
+    background-size: 400% 400%;
+  }
+
+  @keyframes pulse {
+    0% {
+      background-position: 0% 0%;
+    }
+    100% {
+      background-position: -135% 0%;
+    }
   }
 }

apps/client/src/features/editor/components/image/image-view.tsx

@@ -4,8 +4,10 @@ import { useMemo } from "react";
 import { getFileUrl } from "@/lib/config.ts";
 import clsx from "clsx";
 import classes from "./image-view.module.css";
+import { useTranslation } from "react-i18next";
 
 export default function ImageView(props: NodeViewProps) {
+  const { t } = useTranslation();
   const { editor, node, selected } = props;
   const { src, width, align, title, aspectRatio, placeholder } = node.attrs;
   const alignClass = useMemo(() => {
@@ -53,10 +55,12 @@ export default function ImageView(props: NodeViewProps) {
           </Group>
         )}
         {!src && !previewSrc && (
-          <Group justify="space-between" wrap="nowrap">
+          <Group justify="center" wrap="nowrap" gap="xs" maw="100%" px="md">
-            <Loader size={20} />
+            <Loader size={20} style={{ flexShrink: 0 }} />
-            <Text component="span" size="md" truncate="end">
+            <Text component="span" size="sm" truncate="end">
-              Uploading{placeholder?.name ? ` ${placeholder?.name}` : ""}...
+              {placeholder?.name
+                ? t("Uploading {{name}}", { name: placeholder.name })
+                : t("Uploading file")}
             </Text>
           </Group>
         )}

apps/client/src/features/editor/components/video/video-view.module.css

@@ -3,12 +3,26 @@
   justify-content: center;
   align-items: center;
   border-radius: 8px;
+  overflow: hidden;
+  animation: pulse 1.2s ease-in-out infinite;
+
   @mixin light {
-    background-color: var(--mantine-color-gray-0);
+    background: linear-gradient(-90deg, var(--mantine-color-gray-3) 0%, var(--mantine-color-gray-1) 50%, var(--mantine-color-gray-3) 100%);
+    background-size: 400% 400%;
   }
 
   @mixin dark {
-    background-color: var(--mantine-color-dark-7);
+    background: linear-gradient(-90deg, var(--mantine-color-dark-6) 0%, var(--mantine-color-dark-5) 50%, var(--mantine-color-dark-6) 100%);
+    background-size: 400% 400%;
+  }
+
+  @keyframes pulse {
+    0% {
+      background-position: 0% 0%;
+    }
+    100% {
+      background-position: -135% 0%;
+    }
   }
 }
 .video {

apps/client/src/features/editor/components/video/video-view.tsx

@@ -4,8 +4,10 @@ import { useMemo } from "react";
 import { getFileUrl } from "@/lib/config.ts";
 import clsx from "clsx";
 import classes from "./video-view.module.css";
+import { useTranslation } from "react-i18next";
 
 export default function VideoView(props: NodeViewProps) {
+  const { t } = useTranslation();
   const { editor, node, selected } = props;
   const { src, width, align, aspectRatio, placeholder } = node.attrs;
   const alignClass = useMemo(() => {
@@ -58,10 +60,12 @@ export default function VideoView(props: NodeViewProps) {
           </Group>
         )}
         {!src && !previewSrc && (
-          <Group justify="space-between" wrap="nowrap">
+          <Group justify="center" wrap="nowrap" gap="xs" maw="100%" px="md">
-            <Loader size={20} />
+            <Loader size={20} style={{ flexShrink: 0 }} />
-            <Text component="span" size="md" truncate="end">
+            <Text component="span" size="sm" truncate="end">
-              Uploading{placeholder?.name ? ` ${placeholder?.name}` : ""}...
+              {placeholder?.name
+                ? t("Uploading {{name}}", { name: placeholder.name })
+                : t("Uploading file")}
             </Text>
           </Group>
         )}