From 9f81561a861c2f844dd5aa74ab15fa5114b2a050 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Thu, 30 Oct 2025 13:04:51 +0100
Subject: [PATCH] refactor: improve type safety and component stability in
 HalfGlobe

- Replaced custom RotatableGroup type with Three.js Group type for better type safety
- Added key prop to root div element to help React's reconciliation process
- Removed unnecessary custom type definition by using built-in Three.js types
---
 src/components/ui/HalfGlobe.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/components/ui/HalfGlobe.tsx b/src/components/ui/HalfGlobe.tsx
index e4a40ee..0b6d669 100644
--- a/src/components/ui/HalfGlobe.tsx
+++ b/src/components/ui/HalfGlobe.tsx
@@ -3,13 +3,10 @@
 import { Canvas, useFrame } from "@react-three/fiber";
 import { Line, OrbitControls, useTexture } from "@react-three/drei";
 import { useMemo, useRef } from "react";
-
-type RotatableGroup = {
-  rotation: { y: number };
-};
+import type { Group } from "three";
 
 function Globe() {
-  const groupRef = useRef<RotatableGroup | null>(null);
+  const groupRef = useRef<Group>(null);
   const cloudTexture = useTexture("/images/cloud1.png");
 
   // Rotate the globe slowly
@@ -78,7 +75,7 @@ function Globe() {
 
 export function HalfGlobe() {
   return (
-    <div className="w-full h-[500px] bg-white flex items-center justify-center">
+    <div key="half-globe" className="w-full h-[500px] bg-white flex items-center justify-center">
       <Canvas camera={{ position: [0, 1.5, 4], fov: 45 }}>
         <ambientLight intensity={0.8} />
         <Globe />