fix(scripts): keep the script list mounted during a same-entity refresh

The list was cleared and the loading spinner shown synchronously on
every reload, including a manual Refresh or the reload triggered after
an upload or a delete, not just an actual entity switch. That unmounted
every row on screen for the duration of the refetch, dropping whatever
the user was doing inside one, such as an expanded parameter form.

An entity-key ref now tells an actual entity switch apart from a
same-entity reload. Only the former clears the list and shows the
spinner; the latter keeps the current rows rendered until the refetch
resolves.

Author: bburda

src/components/ScriptsPanel.test.tsx

@@ -229,6 +229,36 @@ describe('ScriptsPanel', () => {
         });
     });
 
+    it('keeps the existing rows on screen while a same-entity refresh is in flight', async () => {
+        let resolveSecond: (value: ScriptsFetchResult) => void = () => {};
+        mockFetchEntityScripts.mockResolvedValueOnce({ items: [makeScript({ id: 'a' })] }).mockImplementationOnce(
+            () =>
+                new Promise<ScriptsFetchResult>((resolve) => {
+                    resolveSecond = resolve;
+                })
+        );
+
+        render(<ScriptsPanel entityId="ecu" entityType="components" />);
+        await waitFor(() => {
+            expect(screen.getByTestId('script-row-a')).toBeInTheDocument();
+        });
+
+        const user = userEvent.setup();
+        await user.click(screen.getByRole('button', { name: /refresh/i }));
+
+        // The refetch above is for the same entity, so the row already on
+        // screen must stay mounted and the loading spinner must not replace
+        // it - unmounting it here is exactly what would collapse an expanded
+        // row's in-progress parameter form back to nothing.
+        expect(screen.getByTestId('script-row-a')).toBeInTheDocument();
+        expect(screen.queryByText(/Loading scripts/i)).not.toBeInTheDocument();
+
+        await act(async () => {
+            resolveSecond({ items: [makeScript({ id: 'a' })] });
+            await Promise.resolve();
+        });
+    });
+
     it('reloads the list after a successful upload', async () => {
         mockFetchEntityScripts
             .mockResolvedValueOnce({ items: [] })

src/components/ScriptsPanel.tsx

@@ -57,18 +57,30 @@ export function ScriptsPanel({ entityId, entityType }: ScriptsPanelProps) {
     const [uploadOpen, setUploadOpen] = useState(false);
 
     const abortRef = useRef<AbortController | null>(null);
+    // Identifies the entity the currently-rendered `scripts` belong to, so a
+    // reload of the *same* entity (Refresh, or the reload after an upload or
+    // a delete) can be told apart from an actual entity switch.
+    const currentEntityKeyRef = useRef<string | null>(null);
 
     useEffect(() => {
         abortRef.current?.abort();
         const controller = new AbortController();
         abortRef.current = controller;
 
-        // Clear whatever the previous entity (or previous attempt) rendered so
-        // it never lingers under the new heading while the fresh request is
-        // in flight.
-        setScripts([]);
-        setErrorStatus(null);
-        setIsLoading(true);
+        const entityKey = `${entityType}:${entityId}`;
+        const isEntityChange = currentEntityKeyRef.current !== entityKey;
+        currentEntityKeyRef.current = entityKey;
+
+        if (isEntityChange) {
+            // Only an actual entity switch discards what is currently shown.
+            // A same-entity reload keeps rendering the existing rows while
+            // the refetch is in flight - clearing them here would unmount
+            // every row (and whatever the user was doing inside one, like a
+            // half-filled parameter form) for the duration of the request.
+            setScripts([]);
+            setErrorStatus(null);
+            setIsLoading(true);
+        }
 
         const load = async () => {
             try {
@@ -79,6 +91,7 @@ export function ScriptsPanel({ entityId, entityType }: ScriptsPanelProps) {
                     setErrorStatus(result.errorStatus);
                 } else {
                     setScripts(result.items);
+                    setErrorStatus(null);
                 }
             } catch (err) {
                 if ((err as { name?: string }).name === 'AbortError') return;