Add Skeleton component

[b-yogesh]

Addresses #41

Skeleton to be added for the following MUI components:

• Vega Charts
• Table

Adding skeleton to other components should now be a straightforward task (if requested by the users) as we now have a global state to track the status of theloadingState for each output of every callback that is invoked in a request.

Approach:

Chartlets is built in a way that when a callback is requested, the frontend has to wait until the server responds, which leads to the state changes, thereby re-rendering. During this wait-time when the server is processing the request, currently there is no way to know if a request was sent by a specific component and when it is received as the state can change multiple times during the lifecycle of the app. Instead of trying to differentiate which render is for a request and response, the easy solution was creating a new state that keeps track of every component that will be affected by the callback request and sets the loading state for those components based on the status of the request. Now, the components can easily use a hook to get this state as well as subscribe to any changes to it and based on the value, can either show the skeleton or not.

I would be interested in knowing if there are any other approaches that could have been taken here.

[codecov]

Codecov Report

Attention: Patch coverage is 87.50000% with 8 lines in your changes missing coverage. Please review.

Project coverage is 92.47%. Comparing base (96c1ef3) to head (f6ccf45).

Files with missing lines	Patch %	Lines
...ackages/lib/src/actions/helpers/invokeCallbacks.ts	69.23%	4 Missing ⚠️
.../packages/lib/src/actions/handleComponentChange.ts	0.00%	1 Missing and 1 partial ⚠️
...hartlets.js/packages/lib/src/plugins/mui/Table.tsx	88.88%	1 Missing ⚠️
...ets.js/packages/lib/src/plugins/vega/VegaChart.tsx	90.90%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main      #91      +/-   ##
==========================================
- Coverage   92.70%   92.47%   -0.24%     
==========================================
  Files          86       88       +2     
  Lines        1495     1554      +59     
  Branches      224      235      +11     
==========================================
+ Hits         1386     1437      +51     
- Misses         91       98       +7     
- Partials       18       19       +1     

Flag	Coverage Δ
backend	100.00% <100.00%> (ø)
frontend	84.60% <82.60%> (-0.24%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.