mobx react is not updating every progress bar

Question

I have an app with a mvvm architecture and I want show my user by uploading a file the progress in the Ui.

I get the progress from my api and I can send it in realtime to my mobx store. Here is it possible for me to print the value out, but on the UI the progress starts by 0 and ends with 100. Without one other value.

Where is my mistake im my code?

    class StorageStore implements IStorageSore {
    ....

    uploadProgress: number = 0

    setProgress = (progress: number) => {
        console.log('call setProgress', progress)

        this.uploadProgress = progress
    }

    async uploadBlob(file: File) {
        const blockNameWithPath = `someName`
        this.setProgress(0)
        await this.storageLoader.uploadBlob(
            file,
            Blob.UPLOAD,
            blockNameWithPath,
            this.setProgress
        )
       ....

    }
}

    import { Progress } from '@/components/ui/progress'

const UploadDialog: React.FC<IUploadDialog> = observer(
    ({ machineStore, storageSore }) => {
        const { t } = useTranslation()

        return (
            <Dialog
                open={machineStore.isUploadDialogOpen}
                onOpenChange={(open) => machineStore.setIsDialogOpen(open)}
            >
                <DialogTrigger asChild>
                    <Button>
                        {t('documents.add.title')}
                    </Button>
                </DialogTrigger>
                <DialogContent
                    className="sm:max-w-[425px]"
                >
                    <DialogHeader>
                        <DialogTitle>{t('title')}</DialogTitle>
                    </DialogHeader>
                    <UploadDocuments
                        storageSore={storageSore}
                        machine={machineStore.machine}
                    />
                    <Progress
                        value={storageSore.uploadProgress}
                        className="w-full"
                    />

                    <DialogFooter></DialogFooter>
                </DialogContent>
            </Dialog>
        )
    }
)

export default UploadDialog

Here my console Log:

StorageStore.ts:22 call setProgress 7.267071378513999
   StorageLoader.ts:62 Upload progress api: 7.267071378513999%
   StorageStore.ts:22 call setProgress 21.614878971990358
   StorageLoader.ts:62 Upload progress api: 21.614878971990358%
   StorageStore.ts:22 call setProgress 22.546554789748562
   StorageLoader.ts:62 Upload progress api: 22.546554789748562%
   StorageStore.ts:22 call setProgress 26.83226355143631
   StorageLoader.ts:62 Upload progress api: 26.83226355143631%
   StorageStore.ts:22 call setProgress 30.372631658917488
   StorageLoader.ts:62 Upload progress api: 30.372631658917488%
   StorageStore.ts:22 call setProgress 32.04964813088226
   StorageLoader.ts:62 Upload progress api: 32.04964813088226%
   StorageStore.ts:22 call setProgress 33.540329439295384
   StorageLoader.ts:62 Upload progress api: 33.540329439295384%
   StorageStore.ts:22 call setProgress 38.198708528086414
   StorageLoader.ts:62 Upload progress api: 38.198708528086414%
   StorageStore.ts:22 call setProgress 41.366406308464306
   StorageLoader.ts:62 Upload progress api: 41.366406308464306%
   StorageStore.ts:22 call setProgress 44.16143376173892
   StorageLoader.ts:62 Upload progress api: 44.16143376173892%
   StorageStore.ts:22 call setProgress 47.14279637856518
   StorageLoader.ts:62 Upload progress api: 47.14279637856518%
   StorageStore.ts:22 call setProgress 50.31049415894307
   StorageLoader.ts:62 Upload progress api: 50.31049415894307%
   StorageStore.ts:22 call setProgress 54.78253808418246
   StorageLoader.ts:62 Upload progress api: 54.78253808418246%
   StorageStore.ts:22 call setProgress 59.627252336525125
   StorageLoader.ts:62 Upload progress api: 59.627252336525125%
   StorageStore.ts:22 call setProgress 64.09929626176452
   StorageLoader.ts:62 Upload progress api: 64.09929626176452%
   StorageStore.ts:22 call setProgress 68.94401051410718
   StorageLoader.ts:62 Upload progress api: 68.94401051410718%
   StorageStore.ts:22 call setProgress 73.97505993000149
   StorageLoader.ts:62 Upload progress api: 73.97505993000149%
   StorageStore.ts:22 call setProgress 78.81977418234415
   StorageLoader.ts:62 Upload progress api: 78.81977418234415%
   StorageStore.ts:22 call setProgress 83.66448843468682
   StorageLoader.ts:62 Upload progress api: 83.66448843468682%
   StorageStore.ts:22 call setProgress 88.69553785058113
   StorageLoader.ts:62 Upload progress api: 88.69553785058113%
   StorageStore.ts:22 call setProgress 93.72658726647543
   StorageLoader.ts:62 Upload progress api: 93.72658726647543%
   StorageStore.ts:22 call setProgress 98.5713015188181
   StorageLoader.ts:62 Upload progress api: 98.5713015188181%
   StorageStore.ts:22 call setProgress 100 StorageLoader.ts:62 Upload
   progress api: 100% StorageLoader.ts:67 Upload successful

Thank you

Answer 1

I found my problem, I forgot in the store

constructor(storageLoader: IStorageLoader, machineStore: IMachineStore) {
    makeAutoObservable(this)
}