fix: Import progress page stuck at 0% (#29421)

.changeset/quiet-bottles-fry.md

+---
+"@rocket.chat/meteor": patch
+---
+
+fix: Import progress page stuck at 0%

apps/meteor/client/views/admin/import/ImportProgressPage.tsx

@@ -40,14 +40,15 @@ const ImportProgressPage = function ImportProgressPage() {
 			return operation;
 		},
 		{
+			refetchInterval: 1000,
 			onSuccess: ({ valid, status }) => {
-				console.log('currentOperation', valid, status);
 				if (!valid) {
 					importHistoryRoute.push();
 					return;
 				}
 
 				if (status === 'importer_done') {
+					dispatchToastMessage({ type: 'success', message: t('Importer_done') });
 					importHistoryRoute.push();
 					return;
 				}
@@ -65,7 +66,6 @@ const ImportProgressPage = function ImportProgressPage() {
 
 	const handleProgressUpdated = useMutableCallback(
 		({ key, step, completed, total }: { key: string; step: ProgressStep; completed: number; total: number }) => {
-			console.log('handleProgressUpdated', key, step, completed, total);
 			if (!currentOperation.isSuccess) {
 				return;
 			}
@@ -99,7 +99,7 @@ const ImportProgressPage = function ImportProgressPage() {
 	);
 
 	const progress = useQuery(
-		['ImportProgressPage', 'progress'],
+		['importers', 'progress'],
 		async () => {
 			const { key, step, count: { completed = 0, total = 0 } = {} } = await getImportProgress();
 			return {
@@ -110,21 +110,23 @@ const ImportProgressPage = function ImportProgressPage() {
 			};
 		},
 		{
-			refetchInterval: 1000,
 			enabled: !!currentOperation.isSuccess,
 			onSuccess: (progress) => {
-				console.log('progress', progress);
 				if (!progress) {
 					dispatchToastMessage({ type: 'warning', message: t('Importer_not_in_progress') });
 					prepareImportRoute.push();
 					return;
 				}
-				handleProgressUpdated({
-					key: progress.key,
-					step: progress.step,
-					total: progress.total,
-					completed: progress.completed,
-				});
+
+				// do not use the endpoint data to update the completed progress, leave it to the streamer
+				if (!(ImportingStartedStates as string[]).includes(progress.step)) {
+					handleProgressUpdated({
+						key: progress.key,
+						step: progress.step,
+						total: progress.total,
+						completed: progress.completed,
+					});
+				}
 			},
 			onError: (error) => {
 				handleError(error, t('Failed_To_Load_Import_Data'));
@@ -158,7 +160,8 @@ const ImportProgressPage = function ImportProgressPage() {
 								<Box display='flex' justifyContent='center'>
 									<Box is='progress' value={progress.data.completed} max={progress.data.total} marginInlineEnd='x24' />
 									<Box is='span' fontScale='p2'>
-										{progress.data.completed}/{progress.data.total} ({numberFormat(progress.data.completed / progress.data.total, 0)}
+										{progress.data.completed}/{progress.data.total} (
+										{numberFormat((progress.data.completed / progress.data.total) * 100, 0)}
 										%)
 									</Box>
 								</Box>