Support individual loading of security training urls

Currently, the loading skeleton will appear until ALL security training urls status is complete.

We only have 2 vendors, so it might not take too much time to wait and load the urls when it's completed. But as our vendor list grows, we may want to explore having an individual loading bar for each vendor 🤔

Note

Recently I discovered that this issue might not provide the desired effect.

The default of our GraphQL response will always be pending for all vendors. And it's only AFTER the response from the vendor, would we know if that vendor supports that particular vendor. So it might be confusing to have 1 loading bar and disappear with no result because the vendor doesn't have a url for that identifier.

For example

// Backend GraphQL query
Vendor 1's status = Pending -> loading appears
Vendor 2's status = Pending -> loading appears

// Backend pings vendor, vendor API responds
Vendor 1's status = Completed -> show url link
// No vendor 2 b/c they don't support the particular identifier -> loading would just disappear 🙅 probably bad experience