optimistic-ui

typescript
export interface Todo {
  id: string;
  title: string;
  done: boolean;
  pending: boolean;
}

Optimistic To-Do Toggle in React with Rollback via useReducer

react optimistic-ui hooks
by codesnips 3 tabs
erb
<%= turbo_frame_tag dom_id(flag) do %>
  <tr class="flag-row">
    <td class="flag-name"><%= flag.name %></td>
    <td class="flag-env"><%= flag.environment %></td>
    <td class="flag-state">
      <span class="badge badge--<%= flag.enabled? ? 'on' : 'off' %>">

Admin “quick toggle” with Turbo Streams and a single partial

rails hotwire turbo
by codesnips 4 tabs
typescript
export interface Todo {
  id: string;
  title: string;
  done: boolean;
}

Optimistic Todo Toggling in React with Rollback via useReducer

javascript typescript react
by codesnips 3 tabs
ruby
class LikesController < ApplicationController
  before_action :set_post

  def create
    @like = current_user.likes.create!(post: @post)
    respond(liked: true)

Turbo Streams: swap a button state and counter in one response

rails hotwire turbo
by codesnips 4 tabs
erb
<%# locals: item %>
<button
  type="button"
  class="toggle-btn"
  data-controller="toggle"
  data-action="click->toggle#toggle"

Optimistic toggle button with Stimulus “revert on failure”

rails hotwire stimulus
by codesnips 3 tabs
ruby
class Task < ApplicationRecord
  POSITION_GAP = 1024

  belongs_to :board

  scope :ordered, -> { order(:position) }

Reorder a list server-side and reflect instantly with Turbo Streams

rails hotwire turbo
by codesnips 4 tabs
erb
<%# Subscribe every viewer of this post to its broadcasts %>
<%= turbo_stream_from @post %>

<%# Update the acting user's button to reflect the toggle %>
<%= turbo_stream.replace dom_id(@post, :like_button) do %>
  <%= render "posts/like_button", post: @post %>

Live counter updates with Turbo Streams (likes, votes)

rails hotwire turbo
by codesnips 4 tabs
typescript
export interface Todo {
  id: string;
  title: string;
  completed: boolean;
}

Optimistic UI Updates with Rollback Using React Query useMutation

react react-query optimistic-ui
by codesnips 3 tabs
ruby
class LikesController < ApplicationController
  before_action :set_post

  def create
    @like = @post.likes.find_or_create_by(user: current_user)

Turbo Streams: optimistic UI for likes with disable-on-submit

rails turbo stimulus
by codesnips 3 tabs