Defers loading of package assets on package details page

What does this MR do and why?

• Defers loading of package assets on package details page
• Move major parts of packageFiles GraphQL query from package details query to its own separate query.
• Add apollo options to package_files.vue and move pagination methods from details.vue.
• Define apollo merge policy so that cache can be updated.
• Shows alert when query fails. UX
• Adds loading functionality to package files table UX
• Update tests.

MR to address Only the first 100 files are shown when browsin... (#353820 - closed) & add pagination is planned next.

Screenshots or screen recordings

with loading

Screen_Recording_2023-05-16_at_4.27.44_pm

On error

How to set up and validate locally

1. Use the following command for i in $(seq 1 125); do curl --header "PRIVATE-TOKEN: <TOKEN>" --upload-file $PWD/<filename> "http://172.16.123.1:3000/api/v4/projects/<project-id>/packages/generic/<package-name>/<version>/<filename>$i"; done to upload 125 package files.
   1. Replace token, project-id, package-name, version, filename
2. Visit package registry detail page via groups & projects package list page.
3. Confirm the package assets are visible.
4. Confirm loading screen is visible when the assets are loading/network connection is slow.
5. Confirm features delete assets, bulk deletion of assets work as expected.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

Closes #365232 (closed)