fix check ordering

Author: elazarg

frontend/src/components/panels/AnalysisPanel.tsx

@@ -47,7 +47,9 @@ export function AnalysisPanel({ onSelectCompiledTab }: AnalysisPanelProps) {
 
   // Fetch analysis applicability when game changes
   const fetchApplicability = usePluginStore((state) => state.fetchApplicability);
-  const getApplicability = usePluginStore((state) => state.getApplicability);
+  // Subscribe to the actual state to trigger re-renders when applicability changes
+  const applicabilityByGame = usePluginStore((state) => state.applicabilityByGame);
+  const loadingApplicability = usePluginStore((state) => state.loadingApplicability);
 
   useEffect(() => {
     if (currentGameId) {
@@ -58,7 +60,15 @@ export function AnalysisPanel({ onSelectCompiledTab }: AnalysisPanelProps) {
   // Helper to get applicability for an analysis
   const getAnalysisApplicability = (analysisName: string) => {
     if (!currentGameId) return { applicable: true };
-    return getApplicability(currentGameId, analysisName);
+
+    const isLoading = !!loadingApplicability[currentGameId];
+    const gameApplicability = applicabilityByGame[currentGameId];
+
+    if (isLoading || !gameApplicability) {
+      // Still loading or not yet fetched - disable until we know for sure
+      return { applicable: false, loading: true, reason: 'Checking...' };
+    }
+    return gameApplicability[analysisName] || { applicable: true };
   };
 
   // Track which sections are expanded

frontend/src/stores/pluginStore.ts

@@ -5,6 +5,8 @@ import type { PluginStatus, CompileTarget, CompiledCode } from '../types';
 export interface AnalysisApplicability {
   applicable: boolean;
   reason?: string;
+  /** True while applicability check is in progress */
+  loading?: boolean;
 }
 
 interface PluginStore {
@@ -14,6 +16,9 @@ interface PluginStore {
   /** Analysis applicability per game: gameId -> analysisName -> status */
   applicabilityByGame: Record<string, Record<string, AnalysisApplicability>>;
 
+  /** Games currently being checked for applicability: gameId -> true */
+  loadingApplicability: Record<string, boolean>;
+
   /** Compiled code per game: gameId -> targetId -> CompiledCode */
   compiledCodeByGame: Record<string, Record<string, CompiledCode>>;
 
@@ -26,6 +31,7 @@ interface PluginStore {
   // Actions
   fetchPluginStatus: () => Promise<void>;
   fetchApplicability: (gameId: string) => Promise<void>;
+  isApplicabilityLoading: (gameId: string) => boolean;
   getApplicability: (gameId: string, analysisName: string) => AnalysisApplicability;
   compile: (gameId: string, sourceCode: string, pluginName: string, target: CompileTarget) => Promise<void>;
   clearCompiledCode: (gameId: string, targetId?: string) => void;
@@ -35,6 +41,7 @@ interface PluginStore {
 export const usePluginStore = create<PluginStore>((set, get) => ({
   plugins: [],
   applicabilityByGame: {},
+  loadingApplicability: {},
   compiledCodeByGame: {},
   compilingByGame: {},
   compileErrorByGame: {},
@@ -54,29 +61,54 @@ export const usePluginStore = create<PluginStore>((set, get) => ({
   },
 
   fetchApplicability: async (gameId: string) => {
+    // Mark as loading
+    set((state) => ({
+      loadingApplicability: { ...state.loadingApplicability, [gameId]: true },
+    }));
+
     try {
       const response = await fetch(`/api/plugins/check-applicable/${gameId}`);
       if (!response.ok) {
         console.error('Failed to fetch applicability:', response.status);
+        // On error, remove loading state but don't set data (will use fallback)
+        set((state) => {
+          const { [gameId]: _, ...rest } = state.loadingApplicability;
+          return { loadingApplicability: rest };
+        });
         return;
       }
       const data = await response.json();
-      set((state) => ({
-        applicabilityByGame: {
-          ...state.applicabilityByGame,
-          [gameId]: data.analyses || {},
-        },
-      }));
+      set((state) => {
+        const { [gameId]: _, ...restLoading } = state.loadingApplicability;
+        return {
+          applicabilityByGame: {
+            ...state.applicabilityByGame,
+            [gameId]: data.analyses || {},
+          },
+          loadingApplicability: restLoading,
+        };
+      });
     } catch (error) {
       console.error('Failed to fetch applicability:', error);
+      // On error, remove loading state
+      set((state) => {
+        const { [gameId]: _, ...rest } = state.loadingApplicability;
+        return { loadingApplicability: rest };
+      });
     }
   },
 
+  isApplicabilityLoading: (gameId: string) => {
+    return !!get().loadingApplicability[gameId];
+  },
+
   getApplicability: (gameId: string, analysisName: string) => {
+    const isLoading = !!get().loadingApplicability[gameId];
     const gameApplicability = get().applicabilityByGame[gameId];
-    if (!gameApplicability) {
-      // Not yet fetched, assume applicable
-      return { applicable: true };
+
+    if (isLoading || !gameApplicability) {
+      // Still loading or not yet fetched - disable until we know for sure
+      return { applicable: false, loading: true, reason: 'Checking...' };
     }
     return gameApplicability[analysisName] || { applicable: true };
   },