Introduce htmx and use it to avoid full page load on Subscribe and Follow
#28908
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…`Follow`
This change introduces htmx with the hope we could use it to make Gitea
more reactive while keeping our "HTML rendered on the server" approach.
- Add `htmx.js` that imports `htmx.org` and initializes error toasts
- Place `hx-headers='{"x-csrf-token": "{{.CsrfToken}}"}'` on the `<body>` tag so every request that htmx sends is authenticated
### Error toasts in action
## Don't do a full page load when clicking the subscribe button
- Refactor the form around the subscribe button into its own template
- Use htmx to perform the form submission
- `hx-boost="true"` to prevent the default form submission behavior of a
full page load
- `hx-sync="this:replace"` to replace the current request (in case the
button is clicked again before the response is returned)
- `hx-target="this"` to replace the form tag with the new form tag
- `hx-push-url="false"` to disable a change to the URL
- `hx-swap="show:no-scroll"` to preserve the scroll position
- Change the backend response to return a `<form>` tag instead of a
redirect to the issue page
### Before
### After
Also shows a small request loading indicator (the indicator should be worked on further in a future change)
## Don't do a full page load when clicking the follow button
- Use htmx to perform the button request
- `hx-post="{{.ContextUser.HomeLink}}?action=follow"` to send a POST
request to follow the user
- `hx-target="#profile-avatar-card"` to target the card div for
replacement
- `hx-swap="outerHTML"` to replace the card (as opposed to its inner
content) with the new card that shows the new follower count and button
color
- Change the backend response to return a `<div>` tag (the card) instead
of a redirect to the user page
### Before
### After
Signed-off-by: Yarden Shoham <git@yardenshoham.com>
GiteaBot
added
the
lgtm/need 2
pull-request-size
bot
added
the
size/M
jolheiser
previously requested changes
Jan 23, 2024
GiteaBot
added
lgtm/blocked
Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Signed-off-by: Yarden Shoham <git@yardenshoham.com>
yardenshoham
added
the
topic/ui-interaction
denyskon
approved these changes
Jan 23, 2024
|
How to update multiple divs on one htmx request? |
|
Signed-off-by: Yarden Shoham <git@yardenshoham.com>
3 tasks
6543
approved these changes
Jan 27, 2024
|
@jolheiser is anything else needed to remove your block? |
jolheiser
dismissed
their stale review
Feedback indicated a general interest in htmx
GiteaBot
added
lgtm/done
yardenshoham
added
the
reviewed/wait-merge
wxiaoguang
approved these changes
Jan 30, 2024
wxiaoguang
reviewed
Jan 30, 2024
|
( #28908 (comment) ) |
Signed-off-by: Yarden Shoham <git@yardenshoham.com>
GiteaBot
removed
the
reviewed/wait-merge
henrygoodman
pushed a commit
to henrygoodman/gitea
that referenced
this pull request
Jan 31, 2024
…`Follow` (go-gitea#28908) - Closes go-gitea#28880 This change introduces htmx with the hope we could use it to make Gitea more reactive while keeping our "HTML rendered on the server" approach. - Add `htmx.js` that imports `htmx.org` and initializes error toasts - Place `hx-headers='{"x-csrf-token": "{{.CsrfToken}}"}'` on the `<body>` tag so every request that htmx sends is authenticated - Place `hx-swap="outerHTML"` on the `<body>` tag so the response of each htmx request replaces the tag it targets (as opposed to its inner content) - Place `hx-push-url="false"` on the `<body>` tag so no changes to the URL happen in `<form>` tags - Add the `is-loading` class during request ### Error toasts in action  ## Don't do a full page load when clicking the subscribe button - Refactor the form around the subscribe button into its own template - Use htmx to perform the form submission - `hx-boost="true"` to prevent the default form submission behavior of a full page load - `hx-sync="this:replace"` to replace the current request (in case the button is clicked again before the response is returned) - `hx-target="this"` to replace the form tag with the new form tag - Change the backend response to return a `<form>` tag instead of a redirect to the issue page ### Before  ### After  ## Don't do a full page load when clicking the follow button - Use htmx to perform the button request - `hx-post="{{.ContextUser.HomeLink}}?action=follow"` to send a POST request to follow the user - `hx-target="#profile-avatar-card"` to target the card div for replacement - `hx-indicator="#profile-avatar-card"` to place the loading indicator on the card - Change the backend response to return a `<div>` tag (the card) instead of a redirect to the user page ### Before  ### After  --------- Signed-off-by: Yarden Shoham <git@yardenshoham.com> Co-authored-by: 6543 <m.huber@kithara.com> Co-authored-by: Giteabot <teabot@gitea.io>
silverwind
added a commit
to silverwind/gitea
that referenced
this pull request
Feb 1, 2024
* origin/main: [skip ci] Updated translations via Crowdin Fix UI Spacing Errors in mirror settings (go-gitea#28990) Add htmx guidelines (go-gitea#28993) Some refactor for git http (go-gitea#28995) Fix an actions schedule bug (go-gitea#28942) Fix doc img path in profile readme (go-gitea#28994) Introduce htmx and use it to avoid full page load on `Subscribe` and `Follow` (go-gitea#28908) Fix joins in `db.Find(AndCount)` (go-gitea#28978) Update golang links to use https (go-gitea#28980) Fix google logo in security page (go-gitea#28982)
zjjhot
added a commit
to zjjhot/gitea
that referenced
this pull request
Feb 1, 2024
* giteaofficial/main: Revert "Speed up loading the dashboard on mysql/mariadb (go-gitea#28546)" (go-gitea#29006) Update dorny/paths-filter action (go-gitea#29003) [skip ci] Updated translations via Crowdin Fix UI Spacing Errors in mirror settings (go-gitea#28990) Add htmx guidelines (go-gitea#28993) Some refactor for git http (go-gitea#28995) Fix an actions schedule bug (go-gitea#28942) Fix doc img path in profile readme (go-gitea#28994) Introduce htmx and use it to avoid full page load on `Subscribe` and `Follow` (go-gitea#28908) Fix joins in `db.Find(AndCount)` (go-gitea#28978) Update golang links to use https (go-gitea#28980) Fix google logo in security page (go-gitea#28982) Also match weakly validated ETags (go-gitea#28957)
lunny
pushed a commit
that referenced
this pull request
Feb 17, 2024
- following organization is broken from #28908 - add login check for the follow button in organization profile page
silverwind
pushed a commit
to silverwind/gitea
that referenced
this pull request
Feb 20, 2024
…`Follow` (go-gitea#28908) - Closes go-gitea#28880 This change introduces htmx with the hope we could use it to make Gitea more reactive while keeping our "HTML rendered on the server" approach. - Add `htmx.js` that imports `htmx.org` and initializes error toasts - Place `hx-headers='{"x-csrf-token": "{{.CsrfToken}}"}'` on the `<body>` tag so every request that htmx sends is authenticated - Place `hx-swap="outerHTML"` on the `<body>` tag so the response of each htmx request replaces the tag it targets (as opposed to its inner content) - Place `hx-push-url="false"` on the `<body>` tag so no changes to the URL happen in `<form>` tags - Add the `is-loading` class during request ### Error toasts in action  ## Don't do a full page load when clicking the subscribe button - Refactor the form around the subscribe button into its own template - Use htmx to perform the form submission - `hx-boost="true"` to prevent the default form submission behavior of a full page load - `hx-sync="this:replace"` to replace the current request (in case the button is clicked again before the response is returned) - `hx-target="this"` to replace the form tag with the new form tag - Change the backend response to return a `<form>` tag instead of a redirect to the issue page ### Before  ### After  ## Don't do a full page load when clicking the follow button - Use htmx to perform the button request - `hx-post="{{.ContextUser.HomeLink}}?action=follow"` to send a POST request to follow the user - `hx-target="#profile-avatar-card"` to target the card div for replacement - `hx-indicator="#profile-avatar-card"` to place the loading indicator on the card - Change the backend response to return a `<div>` tag (the card) instead of a redirect to the user page ### Before  ### After  --------- Signed-off-by: Yarden Shoham <git@yardenshoham.com> Co-authored-by: 6543 <m.huber@kithara.com> Co-authored-by: Giteabot <teabot@gitea.io>
silverwind
pushed a commit
to silverwind/gitea
that referenced
this pull request
Feb 20, 2024
- following organization is broken from go-gitea#28908 - add login check for the follow button in organization profile page
6543
pushed a commit
to 6543-forks/gitea
that referenced
this pull request
Feb 26, 2024
- following organization is broken from go-gitea#28908 - add login check for the follow button in organization profile page (cherry picked from commit 6822799)
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This change introduces htmx with the hope we could use it to make Gitea more reactive while keeping our "HTML rendered on the server" approach.
htmx.jsthat importshtmx.organd initializes error toastshx-headers='{"x-csrf-token": "{{.CsrfToken}}"}'on the<body>tag so every request that htmx sends is authenticatedhx-swap="outerHTML"on the<body>tag so the response of each htmx request replaces the tag it targets (as opposed to its inner content)hx-push-url="false"on the<body>tag so no changes to the URL happen in<form>tagsis-loadingclass during requestError toasts in action
Don't do a full page load when clicking the subscribe button
hx-boost="true"to prevent the default form submission behavior of a full page loadhx-sync="this:replace"to replace the current request (in case the button is clicked again before the response is returned)hx-target="this"to replace the form tag with the new form tag<form>tag instead of a redirect to the issue pageBefore
After
Don't do a full page load when clicking the follow button
hx-post="{{.ContextUser.HomeLink}}?action=follow"to send a POST request to follow the userhx-target="#profile-avatar-card"to target the card div for replacementhx-indicator="#profile-avatar-card"to place the loading indicator on the card<div>tag (the card) instead of a redirect to the user pageBefore
After