-
-
Notifications
You must be signed in to change notification settings - Fork 5.5k
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 implementation of diff-file-tree #32768
base: main
Are you sure you want to change the base?
Conversation
This comment was marked as outdated.
This comment was marked as outdated.
Firstly, we need to reach a consensus on whether the issue I've raised (inconsistent rendering methods for left and right content, resulting in a visually disjointed experience under slow network conditions) is a problem that needs to be optimized and solved. If this issue needs to be fixed, I personally believe the best approach would be: ① to have the initial data rendering completed by the backend, just like the content on the right side; ② to leave the page interaction logic to the frontend, such as showing/hiding the file tree, selecting/collapsing/expanding tree nodes, etc. (This PR is implemented according to this logic.)
The implementation of this PR has already removed the dependency on Vue components; therefore, in principle, the Vue components can be deleted. The current logic is very clear: all initial data rendering is handled by the Go template; only a small amount of page interaction logic is handled by JavaScript. It's straightforward and well-defined. I don't see any mixing here. Isn't this logic prevalent in most of the code in the system? @wxiaoguang I sincerely appreciate your insights and am eagerly taking them to heart. Thank you for your valuable guidance. |
This improvement is trivial in my mind because it doesn't really bother me, and the visual feedback could be improved by some other simple approaches (eg: adding a "loading" indicator). Since I can see there are a lot of high priority TODOs in Gitea (eg: my |
This commit e12f09c, simply adds a loading animation. Preview as follows: |
Maybe you could take a look at how GitHub implements the "file tree" with a lot of files. Key points:
https://github.com/google/material-design-icons/tree/master/symbols/ios/10k |
before:
The content on the right is rendered by the backend, while the content on the left is rendered by the frontend. Under slow network conditions, the visual experience becomes significantly disjointed.
after:
The content on the left has been changed to be rendered by the backend, the same as the right.
The rendering of the file tree has been changed from Vue to Go templates, enhancing the visual experience.