fix(verify,captures): resolve placeholder boxes and stuck loading whe…

[yasiru98]

Description

• Fixes an issue where the Verify tool displays grey placeholder boxes instead of capture images when filtering results to fewer than 24, and where the Captures module shows a permanent loading spinner if the API request throws an error.
• Verify.js was concatenating real images with placeholder boxes during loading. When fewer results than pageSize were returned, unfilled placeholder slots remained visible after loading completed.
• Wrapped api.getCaptureImages in try/finally in VerifyContext.js so setIsLoading(false) always runs, even when a request is aborted. Previously the missing error handling caused isLoading to stay true permanently, keeping all 24 placeholder boxes on screen indefinitely.
• Changed rendering in Verify.js from concatenating real images with placeholders to an either/or. Meaning, during loading show placeholders only, after loading show real images only.
• Wrapped queryCapturesApi in try/finally in CapturesContext.js so setIsLoading(false) always runs, even when the request throws. Previously the missing error handling caused the loading spinner in the Captures table to stay visible permanently.

Issue(s) addressed

• Resolves Bug: When listing less than 24 images the default view only empty boxes show up  #1111

What kind of change(s) does this PR introduce?

• Bug fix

Please check if the PR fulfils these requirements

• The commit message follows our guidelines
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

Issue

What is the current behavior?

Filtering captures to fewer than 24 results causes grey placeholder boxes to appear and stay on screen permanently instead of the actual capture images. This is most commonly triggered by applying a filter while a previous request is still in-flight, which aborts the request and leaves isLoading stuck as true. The same stuck-loading bug affects the Captures module, where the loading spinner persists permanently if the API request throws.

What is the new behavior?

Only the actual capture images are shown after loading completes in Verify, with no leftover placeholder boxes. In Captures, the loading spinner correctly clears after the request settles.

Breaking change

Does this PR introduce a breaking change?

No.

Other useful information

Root cause in Verify: loadCaptureImages in VerifyContext.js had no try/finally, so when a fetch was aborted (e.g. rapid filter changes), setIsLoading(false) was never reached and isLoading remained true indefinitely. Combined with Verify.js concatenating real images with placeholder boxes, this resulted in all 24 placeholder boxes staying on screen even after loading completed with fewer results.

Root cause in Captures: getCapturesAsync in CapturesContext.js had the same missing try/finally, so any thrown error during the api request would leave isLoading stuck at true and the spinner visible permanently.