fix(benchmark): show placeholder in model selector when no models downloaded (#588)

Author: a-ghorbani

src/components/Menu/Menu.tsx

@@ -50,9 +50,14 @@ export const Menu: React.FC<MenuProps> & {
   const handleSubmenuOpen = () => setHasActiveSubmenu(true);
   const handleSubmenuClose = () => setHasActiveSubmenu(false);
 
+  // Guard: don't open menu with no children (prevents PaperMenu layout hang)
+  const effectiveVisible =
+    menuProps.visible && React.Children.toArray(children).length > 0;
+
   return (
     <PaperMenu
       {...menuProps}
+      visible={effectiveVisible}
       style={[
         styles.menu,
         hasActiveSubmenu && styles.menuWithSubmenu,

src/locales/en.json

@@ -1028,7 +1028,8 @@
   "benchmark": {
     "title": "Benchmark",
     "modelSelector": {
-      "prompt": "Select Model"
+      "prompt": "Select Model",
+      "noModels": "No models downloaded"
     },
     "buttons": {
       "advancedSettings": "Advanced Settings",

src/screens/BenchmarkScreen/BenchmarkScreen.tsx

@@ -312,16 +312,24 @@ export const BenchmarkScreen: React.FC = observer(() => {
             l10n.benchmark.modelSelector.prompt}
         </Button>
       }>
-      {modelStore.availableModels.map(model => (
+      {modelStore.availableModels.length === 0 ? (
         <Menu.Item
-          key={model.id}
-          onPress={() => handleModelSelect(model)}
-          label={model.name}
-          leadingIcon={
-            model.id === modelStore.activeModelId ? 'check' : undefined
-          }
+          key="no-models"
+          label={l10n.benchmark.modelSelector.noModels}
+          disabled
         />
-      ))}
+      ) : (
+        modelStore.availableModels.map(model => (
+          <Menu.Item
+            key={model.id}
+            onPress={() => handleModelSelect(model)}
+            label={model.name}
+            leadingIcon={
+              model.id === modelStore.activeModelId ? 'check' : undefined
+            }
+          />
+        ))
+      )}
     </Menu>
   );
 

src/screens/BenchmarkScreen/__tests__/BenchmarkScreen.test.tsx

@@ -96,6 +96,22 @@ describe('BenchmarkScreen', () => {
       });
     });
 
+    it('should show placeholder when no models are available', () => {
+      const originalModels = modelStore.models;
+      modelStore.models = [];
+
+      const {getByText} = render(<BenchmarkScreen />);
+
+      // Open model selector
+      fireEvent.press(getByText('Select Model'));
+
+      // Verify placeholder is shown
+      expect(getByText('No models downloaded')).toBeDefined();
+
+      // Restore
+      modelStore.models = originalModels;
+    });
+
     it('should initialize model when selected', async () => {
       const {getByText} = render(<BenchmarkScreen />);
       const modelToSelect = modelStore.availableModels[0];