fileverse · maitrakhatri · Mar 5, 2026 · Mar 5, 2026 · Mar 5, 2026 · Mar 5, 2026
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -81,4 +81,4 @@
     "typescript": "^5.2.2",
     "vite": "^5.0.0"
   }
-}
+}
diff --git a/package/components/editor-workbook.tsx b/package/components/editor-workbook.tsx
@@ -39,7 +39,7 @@ import {
   syncCurrentSheetField,
   updateAllCell,
 } from './editor-workbook-sync';
-
+// import { useEditorData } from '../hooks/use-editor-data';
 // Use the types defined in types.ts
 type OnboardingHandler = OnboardingHandlerType;
 type DataBlockApiKeyHandler = DataBlockApiKeyHandlerType;
@@ -108,8 +108,11 @@ export const EditorWorkbook: React.FC<EditorWorkbookProps> = ({
     getDocumentTitle,
     updateDocumentTitle,
     handleLiveQuery,
+    setIsDataLoaded,
   } = useEditor();
 
+  // const { setIsDataLoaded } = useEditorData();
+
   useEffect(() => {
     if (dataBlockCalcFunction) {
       dataBlockListYdocUpdate({
@@ -143,6 +146,7 @@ export const EditorWorkbook: React.FC<EditorWorkbookProps> = ({
   });
 
   usehandleHomepageRedirect({
+    setIsDataLoaded,
     setSelectedTemplate,
     handleXLSXUpload,
     handleCSVUpload,

diff --git a/package/components/import-button-ui.tsx b/package/components/import-button-ui.tsx
@@ -1,6 +1,16 @@
 import { Popover, PopoverContent, PopoverTrigger } from '@fileverse/ui';
 import { ChangeEventHandler, useState } from 'react';
-import { LucideIcon, IconButton, DynamicModal, Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@fileverse/ui';
+import {
+  LucideIcon,
+  IconButton,
+  DynamicModal,
+  Button,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@fileverse/ui';
 
 import './import-button.scss';
 const MAX_FILE_SIZE = 4 * 1024 * 1024;
@@ -14,9 +24,16 @@ export const CustomButton = ({
   handleExportToJSON,
 }: {
   setExportDropdownOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  handleCSVUpload:
-  (event: ChangeEventHandler<HTMLInputElement> | undefined, file: any, importType: string) => void;
-  handleXLSXUpload: (event: ChangeEventHandler<HTMLInputElement> | undefined, file: any, importType: string) => void;
+  handleCSVUpload: (
+    event: ChangeEventHandler<HTMLInputElement> | undefined,
+    file: any,
+    importType: string,
+  ) => void | Promise<void>;
+  handleXLSXUpload: (
+    event: ChangeEventHandler<HTMLInputElement> | undefined,
+    file: any,
+    importType: string,
+  ) => void | Promise<void>;
   handleExportToXLSX: () => void;
   handleExportToCSV: () => void;
   handleExportToJSON: () => void;
@@ -26,35 +43,46 @@ export const CustomButton = ({
   const [importType, setImportType] = useState('new-dsheet');
   const [file, setFile] = useState<any>(null);
   const [extension, setExtension] = useState('');
+  const [isImporting, setIsImporting] = useState(false);
 
-  const handleApplyData = () => {
+  const handleApplyData = async () => {
     if (extension === 'xlsx') {
       if (file && importType === 'new-dsheet') {
         const url = URL.createObjectURL(file);
         setTimeout(() => {
           window.open(
             `/sheet/create?xlsx=${encodeURIComponent(url)}`,
-            '_blank'
+            '_blank',
           );
         }, 0);
+        setOpenImportTypeModal(false);
       } else {
-        handleXLSXUpload(undefined, file, importType);
+        setIsImporting(true);
+        try {
+          await Promise.resolve(handleXLSXUpload(undefined, file, importType));
+        } finally {
+          setIsImporting(false);
+          setOpenImportTypeModal(false);
+        }
       }
     } else {
       if (file && importType === 'new-dsheet') {
         const url = URL.createObjectURL(file);
         setTimeout(() => {
-          window.open(
-            `/sheet/create?csv=${encodeURIComponent(url)}`,
-            '_blank'
-          );
+          window.open(`/sheet/create?csv=${encodeURIComponent(url)}`, '_blank');
         }, 0);
+        setOpenImportTypeModal(false);
       } else {
-        handleCSVUpload(undefined, file, importType);
+        setIsImporting(true);
+        try {
+          await Promise.resolve(handleCSVUpload(undefined, file, importType));
+        } finally {
+          setIsImporting(false);
+          setOpenImportTypeModal(false);
+        }
       }
     }
-    setOpenImportTypeModal(false);
-  }
+  };
 
   return (
     <Popover
@@ -92,7 +120,10 @@ export const CustomButton = ({
           className="p-2 color-text-default dsheet-export-section"
           data-testid="export-section"
         >
-          <h2 className="dsheet-heading dsheet-heading--section text-helper-text-sm color-text-secondary pl-2" data-testid="export-heading">
+          <h2
+            className="dsheet-heading dsheet-heading--section text-helper-text-sm color-text-secondary pl-2"
+            data-testid="export-heading"
+          >
             Export
           </h2>
           <button
@@ -102,7 +133,9 @@ export const CustomButton = ({
             data-testid="export-json-button"
           >
             <LucideIcon name="FileExport" className="w-[17px] h-[17px]" />
-            <span className="dsheet-text dsheet-text--body text-body-sm">Export to .json</span>
+            <span className="dsheet-text dsheet-text--body text-body-sm">
+              Export to .json
+            </span>
           </button>
 
           <button
@@ -112,7 +145,9 @@ export const CustomButton = ({
             data-testid="export-xlsx-button"
           >
             <LucideIcon name="FileExport" className="w-[17px] h-[17px]" />
-            <span className="dsheet-text dsheet-text--body text-body-sm">Export to .xlsx</span>
+            <span className="dsheet-text dsheet-text--body text-body-sm">
+              Export to .xlsx
+            </span>
           </button>
 
           <button
@@ -122,25 +157,36 @@ export const CustomButton = ({
             data-testid="export-csv-button"
           >
             <LucideIcon name="FileExport" className="w-[17px] h-[17px]" />
-            <span className="dsheet-text dsheet-text--body text-body-sm">Export to .csv</span>
+            <span className="dsheet-text dsheet-text--body text-body-sm">
+              Export to .csv
+            </span>
           </button>
         </div>
         <div
           className="p-2 color-text-default dsheet-import-section"
           data-testid="import-section"
-        // onClick={() => setIsOpen(false)}
+          // onClick={() => setIsOpen(false)}
         >
-          <h2 className="dsheet-heading dsheet-heading--section text-helper-text-sm color-text-secondary pl-2" data-testid="import-heading">
+          <h2
+            className="dsheet-heading dsheet-heading--section text-helper-text-sm color-text-secondary pl-2"
+            data-testid="import-heading"
+          >
             Import
           </h2>
           <div className="btn dsheet-import-actions">
-            <button type="button" className="dsheet-btn dsheet-btn--import-xlsx hover:color-bg-default-hover h-8 rounded p-2 w-full text-left flex items-center justify-start space-x-2 transition" data-testid="import-xlsx-button">
+            <button
+              type="button"
+              className="dsheet-btn dsheet-btn--import-xlsx hover:color-bg-default-hover h-8 rounded p-2 w-full text-left flex items-center justify-start space-x-2 transition"
+              data-testid="import-xlsx-button"
+            >
               <LucideIcon name="FileImport" />
               <label
                 htmlFor="xlsx-upload"
                 className="dsheet-label text-body-sm w-full cursor-pointer"
               >
-                <span className="dsheet-text dsheet-text--body">Import .xlsx</span>
+                <span className="dsheet-text dsheet-text--body">
+                  Import .xlsx
+                </span>
               </label>
             </button>
             <input
@@ -173,13 +219,19 @@ export const CustomButton = ({
               }}
               style={{ display: 'none' }}
             />
-            <button type="button" className="dsheet-btn dsheet-btn--import-csv hover:color-bg-default-hover h-8 rounded p-2 w-full text-left flex items-center justify-start space-x-2 transition" data-testid="import-csv-button">
+            <button
+              type="button"
+              className="dsheet-btn dsheet-btn--import-csv hover:color-bg-default-hover h-8 rounded p-2 w-full text-left flex items-center justify-start space-x-2 transition"
+              data-testid="import-csv-button"
+            >
               <LucideIcon width={18} height={18} name="FileImport" />
               <label
                 htmlFor="csv-upload"
                 className="dsheet-label text-body-sm w-full cursor-pointer"
               >
-                <span className="dsheet-text dsheet-text--body">Import .csv</span>
+                <span className="dsheet-text dsheet-text--body">
+                  Import .csv
+                </span>
               </label>
             </button>
           </div>
@@ -188,45 +240,86 @@ export const CustomButton = ({
       <DynamicModal
         hasCloseIcon
         open={openImportTypeModal}
-        onOpenChange={setOpenImportTypeModal}
+        onOpenChange={(open) => {
+          if (isImporting && !open) return;
+          setOpenImportTypeModal(open);
+        }}
         className="dsheet-modal dsheet-modal--import rounded-lg max-w-[420px]"
         contentClassName="!pt-4 px-6"
         title={
-          <div className="dsheet-heading dsheet-heading--modal font-medium text-lg leading-6" data-testid="import-modal-title">Import file</div>
+          <div
+            className="dsheet-heading dsheet-heading--modal font-medium text-lg leading-6"
+            data-testid="import-modal-title"
+          >
+            Import file
+          </div>
         }
         content={
-          <div className="dsheet-modal-content flex flex-col gap-4 font-normal text-sm leading-5" data-testid="import-modal-content">
-            <div className="dsheet-modal-field" data-testid="import-modal-filename-field">
-              <div className="dsheet-label dsheet-label--heading text-heading-xsm mb-[4px]">File name</div>
+          <div
+            className="dsheet-modal-content flex flex-col gap-4 font-normal text-sm leading-5"
+            data-testid="import-modal-content"
+          >
+            <div
+              className="dsheet-modal-field"
+              data-testid="import-modal-filename-field"
+            >
+              <div className="dsheet-label dsheet-label--heading text-heading-xsm mb-[4px]">
+                File name
+              </div>
               <div className="dsheet-input-wrap h-[36px] p-2 border border-gray-200 rounded color-bg-disabled flex items-center">
-                <p className="dsheet-text dsheet-text--body text-body-sm color-text-disabled truncate-text" data-testid="import-modal-filename">{file?.name}</p>
+                <p
+                  className="dsheet-text dsheet-text--body text-body-sm color-text-disabled truncate-text"
+                  data-testid="import-modal-filename"
+                >
+                  {file?.name}
+                </p>
               </div>
               {file?.size > MAX_FILE_SIZE && (
-                <p className="dsheet-text dsheet-text--error text-[hsla(var(--color-text-danger))] font-[`Helvetica_Neue`] text-[14px] font-normal mt-[4px] leading-[20px]" data-testid="import-modal-file-size-error">
+                <p
+                  className="dsheet-text dsheet-text--error text-[hsla(var(--color-text-danger))] font-[`Helvetica_Neue`] text-[14px] font-normal mt-[4px] leading-[20px]"
+                  data-testid="import-modal-file-size-error"
+                >
                   Can't import this file right now. Try again later.
                 </p>
               )}
             </div>
 
-            <div className="dsheet-modal-field" data-testid="import-modal-location-field">
-              <div className="dsheet-label dsheet-label--heading text-heading-xsm mb-[4px]">Import location</div>
+            <div
+              className="dsheet-modal-field"
+              data-testid="import-modal-location-field"
+            >
+              <div className="dsheet-label dsheet-label--heading text-heading-xsm mb-[4px]">
+                Import location
+              </div>
 
-              <Select onValueChange={(value) => {
-                setImportType(value);
-              }}>
+              <Select
+                onValueChange={(value) => {
+                  setImportType(value);
+                }}
+              >
                 <SelectTrigger data-testid="import-location-trigger">
                   <SelectValue placeholder="Create new dSheet" />
                 </SelectTrigger>
                 <SelectContent id="publish-category">
-                  {[{ id: 'new-dsheet', label: 'Create new dSheet' }, { id: 'merge-current-dsheet', label: 'Insert new sheet(s)' }, { id: 'new-current-dsheet', label: 'Replace sheet(s)' }].map((cat) => (
+                  {[
+                    { id: 'new-dsheet', label: 'Create new dSheet' },
+                    {
+                      id: 'merge-current-dsheet',
+                      label: 'Insert new sheet(s)',
+                    },
+                    { id: 'new-current-dsheet', label: 'Replace sheet(s)' },
+                  ].map((cat) => (
                     <SelectItem key={cat.id} value={cat.id}>
                       {cat.label}
                     </SelectItem>
                   ))}
                 </SelectContent>
               </Select>
             </div>
-            <div className="dsheet-modal-actions flex justify-end items-center gap-2" data-testid="import-modal-actions">
+            <div
+              className="dsheet-modal-actions flex justify-end items-center gap-2"
+              data-testid="import-modal-actions"
+            >
               <Button
                 className="dsheet-btn dsheet-btn--secondary font-medium text-sm leading-5 px-3 py-2 w-20 min-w-[80px] h-10 h-[36px] max-h-10 rounded"
                 size="md"
@@ -237,7 +330,8 @@ export const CustomButton = ({
                 Cancel
               </Button>
               <Button
-                // disabled={!file || file?.size > MAX_FILE_SIZE}
+                disabled={!file || file?.size > MAX_FILE_SIZE || isImporting}
+                isLoading={isImporting}
                 className="dsheet-btn dsheet-btn--primary font-medium text-sm leading-5 px-3 py-2 w-20 min-w-[100px] h-10 h-[36px] max-h-10 rounded"
                 size="md"
                 onClick={handleApplyData}

diff --git a/package/constants/shared-constants.ts b/package/constants/shared-constants.ts
@@ -21,7 +21,7 @@ export const SERVICES_API_KEY: ServicesApiKeyType = RawServicesApiKey;
 export const DEFAULT_SHEET_DATA = [
   {
     id: '0',
-    name: 'Sheet1',
+    name: 'Sheet2',
     celldata: [],
     config: {},
     order: 0,

diff --git a/package/contexts/editor-context.tsx b/package/contexts/editor-context.tsx
@@ -24,6 +24,7 @@ import { DataBlockApiKeyHandlerType, SheetUpdateData } from '../types';
 
 // Define the shape of the context
 export interface EditorContextType {
+  setIsDataLoaded: React.Dispatch<React.SetStateAction<boolean>>;
   handleOnChangePortalUpdate: () => void;
   setSelectedTemplate?: React.Dispatch<React.SetStateAction<string>>;
   setShowSmartContractModal?: React.Dispatch<React.SetStateAction<boolean>>;
@@ -214,6 +215,7 @@ export const EditorProvider: React.FC<EditorProviderProps> = ({
     handleChange,
     handleLiveQuery,
     initialiseLiveQueryData,
+    setIsDataLoaded,
   } = useEditorData(
     ydocRef,
     dsheetId,
@@ -276,6 +278,7 @@ export const EditorProvider: React.FC<EditorProviderProps> = ({
       remoteUpdateRef,
       handleChange,
       loading,
+      setIsDataLoaded,
       forceSheetRender,
       setForceSheetRender,
       activeUsers,
@@ -290,6 +293,7 @@ export const EditorProvider: React.FC<EditorProviderProps> = ({
       handleOnChangePortalUpdate
     };
   }, [
+    setIsDataLoaded,
     setShowSmartContractModal,
     getDocumentTitle,
     updateDocumentTitle,
-Original file line number
+Diff line change
@@ Expand Up / @@ -81,4 +81,4 @@ @@
         "typescript": "^5.2.2",
         "vite": "^5.0.0"
       }
-    }
+    }