-
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: Provide loading feedback when completing a lesson on a slow …
…connection Because: - The complete button will appear to "hang" on slower connections. This commit: - Adds loading spinners to the complete button on lesson and course pages, that will only appear when toggling complete and the connection is slow. - Bumps turbo-rails to latest patch version so we can use the :morph option when replacing content with turbo streams and avoid hover flashes on buttons as the content is replaced. - Switch the complete button on course pages from links to buttons as they are not making GET requests. - Removes some old Stimulus JS hooks for a complete controller that has been removed long ago.
- Loading branch information
1 parent
4869899
commit 7719e15
Showing
4 changed files
with
36 additions
and
16 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
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,23 @@ | ||
|
||
<div id="complete-button" class="flex items-center justify-center"> | ||
<% if lesson.completed? %> | ||
<%= button_to lesson_completion_path(lesson.id), form_class: 'w-full h-full', method: :delete, data: { test_id: 'complete-button' }, class: 'button button--primary h-[54px] sm:h-full w-full md:w-60 hover:bg-teal-700' do %> | ||
<span class="flex items-center"> | ||
<%= button_to lesson_completion_path(lesson.id), form_class: 'w-full h-full group', method: :delete, data: { test_id: 'complete-button' }, class: 'button button--primary relative h-[54px] sm:h-full w-full md:w-60' do %> | ||
<span class="flex items-center group-aria-busy:opacity-0 transition-opacity delay-100"> | ||
<%= inline_svg_tag 'icons/checkmark-circle-solid.svg', class: "h-6 pr-2 #{'pulse-once' if animate}", aria: true, title: 'check', desc: 'checkmark icon' %> | ||
<span>Lesson Completed</span> | ||
</span> | ||
|
||
<div class="group-aria-busy:opacity-100 opacity-0 absolute inset-0 flex items-center justify-center transition-opacity delay-100"> | ||
<%= inline_svg_tag 'icons/spinner.svg', class: 'h-6 w-6 animate-spin text-white', aria: true %> | ||
</div> | ||
<% end %> | ||
<% else %> | ||
<%= button_to lesson_completion_path(lesson.id), form_class: 'w-full h-full', data: { test_id: 'complete-button'}, class: 'button button--primary h-[54px] sm:h-full w-full md:w-60 hover:bg-teal-700' do %> | ||
<span> Mark Complete </span> | ||
<%= button_to lesson_completion_path(lesson.id), form_class: 'w-full h-full group', data: { test_id: 'complete-button'}, class: 'button button--primary relative h-[54px] sm:h-full w-full md:w-60' do %> | ||
<span class="group-aria-busy:opacity-0 transition-opacity delay-100"> Mark Complete </span> | ||
|
||
<div class="group-aria-busy:opacity-100 opacity-0 absolute inset-0 flex items-center justify-center transition-opacity delay-100"> | ||
<%= inline_svg_tag 'icons/spinner.svg', class: 'h-6 w-6 animate-spin text-white', aria: true %> | ||
</div> | ||
<% end %> | ||
<% end %> | ||
</div> |
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,11 +1,24 @@ | ||
<%= tag.turbo_frame(id: dom_id(lesson, 'complete-button'), data: { controller: 'complete' }) do %> | ||
<%= tag.div(id: dom_id(lesson, 'complete-button')) do %> | ||
<% if lesson.completed? %> | ||
<%= link_to lesson_completion_path(lesson.id, icon_only: true), data: { turbo_method: :delete, complete: @lesson.completed?, test_id: 'complete-button', action: 'click->complete#updateProgress' } do %> | ||
<%= inline_svg_tag 'icons/checkmark-circle-solid.svg', class: "h-7 sm:h-8 text-teal-600 #{animation_class}", aria: true, title: 'check', desc: 'checkmark icon' %> | ||
<%= button_to lesson_completion_path(lesson.id, icon_only: true), method: :delete, form_class: 'group', class: 'relative hover:cursor-pointer', data: { complete: @lesson.completed?, test_id: 'complete-button' } do %> | ||
<span class="group-aria-busy:opacity-0 transition-opacity delay-100"> | ||
<%= inline_svg_tag 'icons/checkmark-circle-solid.svg', class: "h-7 sm:h-8 text-teal-600 #{animation_class}", aria: true, title: 'check', desc: 'checkmark icon' %> | ||
</span> | ||
|
||
<span class="group-aria-busy:opacity-100 opacity-0 absolute inset-0 flex items-center justify-center transition-opacity delay-100"> | ||
<%= inline_svg_tag 'icons/spinner.svg', class: 'h-6 sm:h-7 animate-spin text-gray-400', aria: true %> | ||
</span> | ||
<% end %> | ||
<% else %> | ||
<%= link_to lesson_completion_path(lesson.id, icon_only: true), data: { turbo_method: :post, complete: @lesson.completed?, test_id: 'complete-button', action: 'click->complete#updateProgress' } do %> | ||
<%= inline_svg_tag 'icons/checkmark-circle-solid.svg', class: 'h-7 sm:h-8 text-gray-400 dark:text-gray-600', aria: true, title: 'check', desc: 'checkmark icon' %> | ||
<%= button_to lesson_completion_path(lesson.id, icon_only: true), form_class: 'group', class: 'relative hover:cursor-pointer', data: { complete: @lesson.completed?, test_id: 'complete-button' } do %> | ||
|
||
<span class="group-aria-busy:opacity-0 transition-opacity delay-100"> | ||
<%= inline_svg_tag 'icons/checkmark-circle-solid.svg', class: 'h-7 sm:h-8 text-gray-400 dark:text-gray-600', aria: true, title: 'check', desc: 'checkmark icon' %> | ||
</span> | ||
|
||
<span class="group-aria-busy:opacity-100 opacity-0 absolute inset-0 flex items-center justify-center transition-opacity delay-100"> | ||
<%= inline_svg_tag 'icons/spinner.svg', class: 'h-6 sm:h-7 animate-spin text-gray-400', aria: true %> | ||
</span> | ||
<% end %> | ||
<% 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