Geolocation with OpenLayers

I'm working with Remix on an OpenLayers project.

Utilizing navigator watchPosition, some layers and features, I can easily track the user's position, move the user's marker, and adjust the center of the map.

However, it's very jagged with the constant updates.

To alleviate this, I've been experimenting with the map.getView().animate() to recenter the map.

However, I believe this to be causing a delay in the other updates of the page, as with any type of animation, the user marker does not update appropriately (In fact, it only updates when the screen is clicked)

So far, I've tried different animation styles, debouncing the animation request, canceling the animation every time watchPosition success fires, and I'm currently experimenting with waiting to change the center until a certain distance away is reached.

I was wondering if anyone has experienced this before? Or has any ideas for achieving this goal?

I can share the code I have. I’m using RxJS, but that shouldn’t make a difference. The view animation is smooth. I’m using a dedicated vector layer for the geolocation updates, with updateWhileInteracting: true and updateWhileAnimating: true.

return new Observable<void>(() => {
        const view = state.map.getView();

        const combined$ = combineLatest([
            position$,
            rotation$.pipe(
                startWith({
                    absoluteRotation: 0,
                    compassHeading: 0,
                }),
                throttleTime(1000),
            ),
        ]);

        const watchCombinedSubscription = combined$.subscribe({
            next: ([position, rotation]) => {
                if (isGPSError(position)) {
                    return;
                }

                if (view.getAnimating() || view.getInteracting()) {
                    return;
                }

                const currentPosition = fromLonLat([position.longitude, position.latitude], 'EPSG:3857');
                view.animate({
                    rotation: rotation.compassHeading,
                    center: currentPosition,
                });
            },
        });

        return () => {
            watchCombinedSubscription.unsubscribe();
        };
    });