feat: add component SkeletonLoading

[luka-nextcloud]

📝 Summary

• Resolves: Use skeleton screen instead of loading spinner  #4269

🖼️ Screenshots

🏚️ Before

🏡 After

🚧 TODO

• ...

🏁 Checklist

• Code is properly formatted (npm run lint / npm run stylelint / composer run cs:check)
• Sign-off message is added to all commits
• Tests (unit, integration and/or end-to-end) passing and the changes are covered with tests
• Documentation (README or documentation) has been updated or is not required

[cypress]

Passing run #11460 ↗︎

0

149

2

0

0

Details:

feat: add component SkeletonLoading
Project: Text	Commit:26a401cf17
Status: Passed	Duration: 04:18 💡
Started: Aug 2, 2023 10:56 AM	Ended: Aug 2, 2023 11:00 AM

_{This comment has been generated by cypress-bot as a result of this project's GitHub integration settings.}

[juliusknorr]

I've added a quick screen recording for easier review by the designers with my proposed changes. @marcoambrosini could you have a look?

[marcoambrosini]

Looks much nicer than the spinner :)
the only thing I would add is a small border radius to the rectangles, maybe 4px?

[juliusknorr]

the only thing I would add is a small border radius to the rectangles, maybe 4px?

I'd keep this separate, if this shall be done then it would be good to structure this so that every app using skeleton loaders adjusts for the same target nextcloud version :)

[mejo-]

@luka-nextcloud sorry for yet another round of feedback: both in src/components/Editor/Wrapper.vue and in src/views/RichWorkspace.vue there's leftovers in the CSS that refer to .icon-loading which is not used anymore. The ones in src/components/Editor/Wrapper.vue probably can be removed, the ones in src/view/RichWorkspace.vue look like they need to be updated to be active when this.loading is set, no?

[mejo-]

/compile

[juliusknorr]

/backport to stable27

[backportbot-nextcloud]

The backport to stable27 failed. Please do this backport manually.

# Switch to the target branch and update it
git checkout stable27
git pull origin stable27
# Create the new backport branch
git checkout -b fix/foo-stable27
# Cherry pick the change from the commit sha1 of the change against the default branch# This might cause conflicts. Resolve them.
git cherry-pick abc123
# Push the cherry pick commit to the remote repository and open a pull request
git push origin fix/foo-stable27

More info at https://docs.nextcloud.com/server/latest/developer_manual/getting_started/development_process.html#manual-backport

[mejo-]

/backport b982efa to stable27