Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve loading of apps and data models on Dashboard #13137

Merged
merged 17 commits into from
Jul 17, 2024

Conversation

ErlingHauan
Copy link
Contributor

@ErlingHauan ErlingHauan commented Jul 12, 2024

Description

This PR improves the loading of apps and datamodels on the Dashboard page.

  1. When the first page of repos have been loaded, a spinnerHeight state is set. This prevents flickering when loading uncached repos.
  2. An optional isLoading prop has been added to StudioTableRemotePagination and StudioTableLocalPagination. By using this prop, StudioSpinner will be used internally with the correct height.
  3. Added prefetching. When fetching the first page of repos, we also make a call for the second page, which gets stored in the cache. This way, we don't have to show the loading spinner at all when navigating to the second page. Also, when we navigate to the second page, the next page (page 3) is fetched in the background, and so forth. Note that when changing the page size, we will have to show the loading spinner. The goal was not to eliminate the loading spinner all together, but just to make it a little smoother.
  4. Replaced Button with StudioButton in the RepoList component, so that we have more control over changes coming from Designsystemet.
  5. Replaced the words "Fjern" with "Slett" and "Rediger" with "Endre" in the RepoList component, after guidelines posted by @Ildest on Slack. Also removed the dashboard.edit_data_models text, since it was identical to dashboard:edit_app.

Before this fix:

Screen.Recording.2024-06-27.at.10.28.10.mov

After fixing the spinner height:

smootherLoading.mp4

After adding prefetching:

afterPrefetching.mp4

Related Issue(s)

Verification

  • Your code builds clean without any errors or warnings
  • Manual testing done (required)
  • Relevant automated test added (if you find this hard, leave it and we'll help out)

@github-actions github-actions bot added area/dashboard Area: Related to the dashboard application solution/studio/designer Issues related to the Altinn Studio Designer solution. labels Jul 12, 2024
@ErlingHauan ErlingHauan changed the title Improvements to StudioTable components Improve loading of apps and data models on Dashboard Jul 15, 2024
Copy link

codecov bot commented Jul 15, 2024

Codecov Report

Attention: Patch coverage is 97.95918% with 1 line in your changes missing coverage. Please review.

Project coverage is 97.29%. Comparing base (1651068) to head (a6bf5df).
Report is 2 commits behind head on main.

Files Patch % Lines
...nd/dashboard/hooks/useReposSearch/useRepoSearch.ts 80.00% 0 Missing and 1 partial ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main   #13137      +/-   ##
==========================================
+ Coverage   92.16%   97.29%   +5.13%     
==========================================
  Files        1443       13    -1430     
  Lines       20302      259   -20043     
  Branches     2432       46    -2386     
==========================================
- Hits        18711      252   -18459     
+ Misses       1326        5    -1321     
+ Partials      265        2     -263     

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

@github-actions github-actions bot added the quality/testing Tests that are missing, needs to be created or could be improved. label Jul 15, 2024
@ErlingHauan ErlingHauan marked this pull request as ready for review July 15, 2024 11:20
Copy link
Contributor

@wrt95 wrt95 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great job! 🚀
Added some comments 😄

@ErlingHauan ErlingHauan requested a review from wrt95 July 16, 2024 10:09
Copy link
Contributor

@wrt95 wrt95 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great job!

@ErlingHauan ErlingHauan merged commit 3c7ea07 into main Jul 17, 2024
9 checks passed
@ErlingHauan ErlingHauan deleted the fix/dashboard-table-spinner-height branch July 17, 2024 10:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/dashboard Area: Related to the dashboard application quality/testing Tests that are missing, needs to be created or could be improved. solution/studio/designer Issues related to the Altinn Studio Designer solution.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

StudioTableRemotePagination - maintain height when spinner is displayed
2 participants