-
Notifications
You must be signed in to change notification settings - Fork 2.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Feature: Optimize theme switcher performance
Because: * There is a noticeable delay between switching the theme and the theme icon updating This commit: * Toggles the theme class in the same turbo stream request we use to update the theme icon. * Adds a custom turbo stream action to toggle classes on elements
- Loading branch information
1 parent
f8c0d4f
commit ffe7a8e
Showing
9 changed files
with
60 additions
and
36 deletions.
There are no files selected for viewing
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,15 +1,4 @@ | ||
<%= link_to( | ||
themes_path(theme: other_theme.name), | ||
class: yass(link: type), | ||
data: { | ||
'turbo-method' => :put, | ||
'turbo-frame' => '_top', | ||
controller: 'theme--switcher', | ||
'theme--switcher-current-theme-value' => current_theme.name, | ||
'theme--switcher-other-theme-value' => other_theme.name, | ||
action: 'click->theme--switcher#toggle' | ||
} | ||
) do %> | ||
<%= link_to themes_path(theme: other_theme.name), class: yass(link: type), data: { turbo_method: :put } do %> | ||
<%= inline_svg_tag "icons/#{current_theme.icon}.svg", class: yass(icon: type), aria: true, title: 'theme icon' %> | ||
<%= text unless icon_only? %> | ||
<% end %> |
This file was deleted.
Oops, something went wrong.
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,16 +1,24 @@ | ||
class ThemesController < ApplicationController | ||
before_action :cache_previous_theme | ||
|
||
def update | ||
theme = params[:theme] | ||
@new_theme = Users::Theme.for(params[:theme]) | ||
|
||
if Users::Theme.exists?(theme) | ||
change_current_theme(theme) | ||
respond_to do |format| | ||
if @new_theme.present? | ||
change_current_theme(params[:theme]) | ||
|
||
respond_to do |format| | ||
format.html { redirect_back(fallback_location: root_path) } | ||
format.turbo_stream | ||
else | ||
flash.now[:alert] = "Sorry, we can't find that theme." | ||
format.turbo_stream { render turbo_stream: turbo_stream.update('flash-messages', partial: 'shared/flash') } | ||
end | ||
else | ||
redirect_back(fallback_location: root_path, alert: "Sorry, we can't find that theme.", status: :see_other) | ||
end | ||
end | ||
|
||
private | ||
|
||
def cache_previous_theme | ||
@previous_theme = current_theme | ||
end | ||
end |
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
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,11 @@ | ||
import { Turbo } from '@hotwired/turbo-rails'; | ||
|
||
Turbo.StreamActions.toggle_classes = function toggleClasses() { | ||
const cssClasses = this.getAttribute('classes').split(' '); | ||
const id = this.getAttribute('id'); | ||
const element = document.getElementById(id); | ||
|
||
cssClasses.forEach((cssClass) => { | ||
element.classList.toggle(cssClass); | ||
}); | ||
}; |
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
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,10 @@ | ||
|
||
<%= turbo_stream_action_tag 'toggle_classes', id: 'root-element', classes: [@previous_theme, @new_theme] %> | ||
|
||
<%= turbo_stream.update 'theme_switcher' do %> | ||
<%= render Theme::SwitcherComponent.new(current_theme:, type: :icon_only) %> | ||
<%= render Theme::SwitcherComponent.new(current_theme: @new_theme, type: :icon_only) %> | ||
<% end %> | ||
|
||
<%= turbo_stream.update 'theme_switcher_mobile' do %> | ||
<%= render Theme::SwitcherComponent.new(current_theme:, type: :mobile) %> | ||
<%= render Theme::SwitcherComponent.new(current_theme: @new_theme, type: :mobile) %> | ||
<% end %> |
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
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,25 @@ | ||
require 'rails_helper' | ||
|
||
RSpec.describe 'Themes' do | ||
describe 'PUT #update' do | ||
before do | ||
cookies[:theme] = 'light' | ||
end | ||
|
||
context 'when the theme is valid' do | ||
it 'switches themes' do | ||
expect do | ||
put themes_path(format: :turbo_stream, params: { theme: 'dark' }) | ||
end.to change { cookies[:theme] }.from('light').to('dark') | ||
end | ||
end | ||
|
||
context 'when the theme is invalid' do | ||
it "doesn't switch themes" do | ||
expect do | ||
put themes_path(format: :turbo_stream, params: { theme: 'invalid' }) | ||
end.not_to change { cookies[:theme] } | ||
end | ||
end | ||
end | ||
end |