refactor(meshes): refactor meshes to use our newer patterns

[johncowen]

This PR is a little mix of things unfortunately, they are small things related to meshes refactoring, so happy to leave as is but would be fine to split smaller if thats preferred. The GH "Hide Whitespace" option is probably good for review.

---

Collection/Table Loading:

We have this little 'wart' in quite a few places:

kuma-gui/packages/kuma-gui/src/app/meshes/views/MeshListView.vue

Line 36 in 765d9f5

:items="data?.items ?? [undefined]"

Not only this but we have a lot of weirdness to support the fact that KTable is the only component we use that has its own loader embedded in it, for absolutely everything else we use DataLoader to provide loading states and loading visuals.

I gave DataLoader a new variant="default | list" attribute, which is shorthand for avoiding providing a full #loading slot to dataloader. By specifying list you can tell it to use the exact same loader that KTable uses (KTable just uses <KSkeleton type="table" />) so essentially <DataLoader variant="list" /> we replicate the exact same look=and-feel of KTable's loader, but we can also use it for other list type structures (that aren't KTables) if we need to.

This also means that our listing pages work exactly the same as all our other pages. No weird <template #loadable/> things just to support the embedded loader inside KTable, and the 'wart' is gone 🎉

I implemented this only in MeshList for the moment, with the plan to rollout in very near-future PRs.

This led me to realising I could upgrade a few more things in our meshes/ module, so I did that while I was here:

Other Upgrades

• <div class="stack" /> to <XLayout type="stack" />
• <KCard /> to <XCard />
• I removed some unnecessary divs entirely.
• I noticed we had <div class="columns" /> which led me to do the next section:

<XLayout type="columns" />

Still only 99% sure about XLayout, but I still prefer using it to <div class="thing">. I made a new layout type of columns and switched meshes to use that instead of the div. Its uses the exact same CSS.

---

Lastly I wanted to point out that I really like the name :variant for an attribute that means "I choose this variable property". I've used type="" in the past but found that in Vue this can clash with HTML type="" and I fel back to use :action which only worked as a good name for the specific usecase (I needed it for XAction). :variant as a name would work in every case and would not clash with HTML at all. Nothing to do as yet, but as a nitty refactor PR at some point we might want to standardize on :variant as a word and then make its usage consistent on all our components that use things like :type or :action.

[netlify]

✅ Deploy Preview for kuma-gui ready!

Name	Link
🔨 Latest commit	24e6b30
🔍 Latest deploy log	https://app.netlify.com/sites/kuma-gui/deploys/674de1a5ab8bea000889dfb1
😎 Deploy Preview	https://deploy-preview-3233--kuma-gui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[schogges]

I like variant as a prop name for these type of things 👍 🙂

[johncowen]

I made an issue for the rollout of this everywhere #3259