refactor(web/menu): improve radial menu transitions

resource/interface/client/radial.lua

@@ -21,6 +21,13 @@ function lib.showRadial(id)
     })
 end
 
+function lib.hideRadial()
+    SendNUIMessage({
+        action = 'openRadialMenu',
+        data = false
+    })
+end
+
 function lib.addRadialItem(items)
     if table.type(items) == 'array' then
         for i = 1, #items do
@@ -53,9 +60,9 @@ RegisterNUICallback('radialClick', function(index, cb)
     local item = not currentRadial and menuItems[index + 1] or currentRadial.items[index + 1]
     if item.menu then lib.showRadial(item.menu) end
     if item.onSelect then item.onSelect() end
+    lib.hideRadial()
 end)
 
--- TODO: fix transition?
 RegisterNUICallback('radialBack', function(_, cb)
     cb(1)
     if currentRadial.menu then

web/src/features/menu/radial/index.tsx

@@ -74,12 +74,6 @@ const RadialMenu: React.FC = () => {
     setMenu({ ...menu, items: data });
   });
 
-  const handleClick = async (index: number) => {
-    fetchNui('radialClick', index);
-    // TODO: shouldClose
-    setVisible(false);
-  };
-
   return (
     <>
       <Box className={classes.wrapper}>
@@ -102,7 +96,7 @@ const RadialMenu: React.FC = () => {
                   <g
                     transform={`rotate(-${index * pieAngle} 175 175)`}
                     className={classes.sector}
-                    onClick={() => handleClick(index)}
+                    onClick={() => fetchNui('radialClick', index)}
                   >
                     <path
                       d={`M175.01,175.01 l175,0 A175.01,175.01 0 0,0 ${175 + 175 * Math.cos(-degToRad(pieAngle))}, ${
@@ -130,8 +124,7 @@ const RadialMenu: React.FC = () => {
             <g
               transform={`translate(175, 175)`}
               onClick={() => {
-                setVisible(false);
+                menu.sub ? fetchNui('radialBack') : setVisible(false);
-                menu.sub && fetchNui('radialBack');
               }}
             >
               <circle r={30} className={classes.centerCircle} />