Improve file preview handling for non finished uploads (#213)

packages/client/src/handlers/queries/files/local-file-get.ts

@@ -99,6 +99,19 @@ export class LocalFileGetQueryHandler
       };
     }
 
+    if (
+      event.type === 'node.updated' &&
+      event.accountId === input.accountId &&
+      event.workspaceId === input.workspaceId &&
+      event.node.id === input.fileId
+    ) {
+      const newOutput = await this.handleQuery(input);
+      return {
+        hasChanges: true,
+        result: newOutput,
+      };
+    }
+
     return {
       hasChanges: false,
     };

packages/client/src/jobs/file-download.ts

@@ -84,7 +84,7 @@ export class FileDownloadJobHandler implements JobHandler<FileDownloadInput> {
     if (file.attributes.status === FileStatus.Pending) {
       return {
         type: 'retry',
-        delay: ms('10 seconds'),
+        delay: ms('5 seconds'),
       };
     }
 

packages/ui/src/components/files/file-block.tsx

@@ -1,7 +1,5 @@
 import { LocalFileNode } from '@colanode/client/types';
-import { FileStatus } from '@colanode/core';
 import { FileIcon } from '@colanode/ui/components/files/file-icon';
-import { FileNotUploaded } from '@colanode/ui/components/files/file-not-uploaded';
 import { FilePreview } from '@colanode/ui/components/files/file-preview';
 import { useLayout } from '@colanode/ui/contexts/layout';
 import { useWorkspace } from '@colanode/ui/contexts/workspace';
@@ -28,22 +26,8 @@ export const FileBlock = ({ id }: FileBlockProps) => {
   }
 
   const file = nodeGetQuery.data as LocalFileNode;
-  const isReady = file.attributes.status === FileStatus.Ready;
   const canPreview = canPreviewFile(file.attributes.subtype);
 
-  if (!isReady) {
-    return (
-      <div
-        className="flex h-72 max-h-72 max-w-128 w-full items-center justify-center cursor-pointer overflow-hidden rounded-md p-2 hover:bg-muted/50"
-        onClick={() => {
-          layout.previewLeft(id, true);
-        }}
-      >
-        <FileNotUploaded mimeType={file.attributes.mimeType} />
-      </div>
-    );
-  }
-
   if (canPreview) {
     return (
       <div

packages/ui/src/components/files/file-body.tsx

@@ -1,7 +1,5 @@
 import { LocalFileNode } from '@colanode/client/types';
-import { FileStatus } from '@colanode/core';
 import { FileNoPreview } from '@colanode/ui/components/files/file-no-preview';
-import { FileNotUploaded } from '@colanode/ui/components/files/file-not-uploaded';
 import { FilePreview } from '@colanode/ui/components/files/file-preview';
 import { FileSaveButton } from '@colanode/ui/components/files/file-save-button';
 import { FileSidebar } from '@colanode/ui/components/files/file-sidebar';
@@ -13,7 +11,6 @@ interface FileBodyProps {
 
 export const FileBody = ({ file }: FileBodyProps) => {
   const canPreview = canPreviewFile(file.attributes.subtype);
-  const isReady = file.attributes.status === FileStatus.Ready;
 
   return (
     <div className="flex h-full max-h-full w-full flex-row items-center gap-2">
@@ -23,9 +20,7 @@ export const FileBody = ({ file }: FileBodyProps) => {
         </div>
 
         <div className="flex flex-col flex-grow items-center justify-center overflow-hidden p-10">
-          {!isReady ? (
+          {canPreview ? (
-            <FileNotUploaded mimeType={file.attributes.mimeType} />
-          ) : canPreview ? (
             <FilePreview file={file} />
           ) : (
             <FileNoPreview mimeType={file.attributes.mimeType} />

packages/ui/src/components/files/file-preview.tsx

@@ -1,6 +1,8 @@
 import { DownloadStatus, LocalFileNode } from '@colanode/client/types';
+import { FileStatus } from '@colanode/core';
 import { FileDownloadProgress } from '@colanode/ui/components/files/file-download-progress';
 import { FileNoPreview } from '@colanode/ui/components/files/file-no-preview';
+import { FileNotUploaded } from '@colanode/ui/components/files/file-not-uploaded';
 import { FilePreviewAudio } from '@colanode/ui/components/files/previews/file-preview-audio';
 import { FilePreviewImage } from '@colanode/ui/components/files/previews/file-preview-image';
 import { FilePreviewVideo } from '@colanode/ui/components/files/previews/file-preview-video';
@@ -49,5 +51,10 @@ export const FilePreview = ({ file }: FilePreviewProps) => {
     return <FileDownloadProgress progress={download.progress} />;
   }
 
+  const isReady = file.attributes.status === FileStatus.Ready;
+  if (!isReady) {
+    return <FileNotUploaded mimeType={file.attributes.mimeType} />;
+  }
+
   return <FileNoPreview mimeType={file.attributes.mimeType} />;
 };