Auto-rotation not working in production deployment of React Globe component

[kesjam]

Description

The auto-rotation feature of the React Globe component is not functioning as expected in the production environment. Despite setting the autoRotate prop to true and configuring the controls, the globe fails to rotate automatically when deployed to production. Interestingly, the auto-rotation works correctly in the Vercel preview environment, suggesting a potential issue with the production build or optimization process.

Steps to Reproduce

1. Set up a React project with the React Globe component.
2. Configure the globe with autoRotate set to true.
3. Implement a toggle switch to enable/disable auto-rotation.
4. Deploy the project to Vercel.
5. Check the preview deployment - auto-rotation should work correctly.
6. Check the production deployment - auto-rotation fails to work.

Expected Behavior

• The globe should start rotating automatically when the component mounts with autoRotate set to true.
• When toggling auto-rotation on, the globe should immediately start rotating.
• When toggling auto-rotation off, the globe should immediately stop rotating.
• The rotation should be smooth and consistent.
• Behavior should be consistent across preview and production environments.

Actual Behavior

• In the Vercel preview environment, auto-rotation works as expected.
• In the Vercel production environment:
  • The globe fails to start rotating automatically on component mount.
  • Toggling auto-rotation on doesn't initiate rotation.
  • The globe remains static even when auto-rotation is enabled.

Environment

• React version: 18.2.0
• React Globe version: 5.0.2
• Browser: Various (issue occurs across different browsers in production)
• OS: Various (issue occurs across different operating systems in production)
• Deployment: Vercel
  • Vercel Preview: Auto-rotation works correctly
  • Vercel Production: Auto-rotation does not work

Additional Information

• The issue persists even after implementing a continuous animation loop and forcing control updates.
• Console logs show that the autoRotate property is being set correctly, but the visual result doesn't match in production.
• The discrepancy between preview and production environments suggests the issue may be related to build optimization or environment-specific configurations.

Code Snippet

useEffect(() => {
  if (!mounted || !globeReady || !globeRef.current) return;

  const globe = globeRef.current;
  const controls = globe.controls();
  
  controls.autoRotate = autoRotate;
  controls.autoRotateSpeed = 0.5;
  
  let frameId: number;
  
  function animate() {
    controls.update();
    frameId = requestAnimationFrame(animate);
  }
  
  animate();

  return () => {
    cancelAnimationFrame(frameId);
    controls.autoRotate = false;
  };
}, [mounted, globeReady, autoRotate]);

Possible Causes

1. Build optimization in production affecting the Globe or Three.js initialization.
2. Environment-specific configurations interfering with the auto-rotation setup.
3. Timing issues with the globe initialization and control setup in the production environment.
4. Potential conflicts with other production-specific code or libraries.

Attempted Solutions

1. Implemented a continuous animation loop using requestAnimationFrame.
2. Added immediate control updates when toggling the auto-rotation switch.
3. Forced an initial rotation update after the globe is ready.
4. Ensured proper cleanup to prevent memory leaks.

These attempts have not resolved the issue in the production environment.

Additional Debugging Steps

1. Add extensive console logging in both preview and production to track the lifecycle of the component and the state of controls.
2. Compare the bundled JavaScript between preview and production builds to identify any differences.
3. Test with different versions of React Globe to see if the issue is version-specific.
4. Implement a minimal reproduction of the issue in a separate project to isolate the problem.

Impact

This issue significantly affects the user experience of our application, as the auto-rotation feature is a key visual element of the Bitcoin Live Price Globe.

Any assistance in identifying the root cause and providing a stable solution that works consistently in both preview and production environments would be greatly appreciated.

Production: btclivestream.com

[vasturiano]

@kesjam thanks for reaching out.

It's easier to troubleshoot this if you can replicate the issue on a simple example on https://codesandbox.io/ and then share that here.

From your code one thing that seems odd, is that you're invoking controls.update() yourself at every raf. The component takes care of that so you shouldn't need to do it really. Do you know why that is there?

Another thing is that on your effect destructor you're invoking controls.autoRotate = false;. Is it possible that there's a race condition and that call is causing the camera to stop rotating unintentionally?