mirror of
https://github.com/System-End/hackatime.git
synced 2026-04-20 00:35:22 +00:00
skeleton load it all! (#839)
This commit is contained in:
Echo
GitHub
parent
99e4215759
commit
5217348fa3
5 changed files with 180 additions and 10 deletions
|
|
@ -4,10 +4,13 @@
|
|||
</p>
|
||||
<div class="space-y-2">
|
||||
<% (current_user ? 5 : 3).times do %>
|
||||
<div class="flex items-center p-3 rounded-lg bg-dark opacity-70 animate-pulse">
|
||||
<div class="w-8 text-center text-muted">...</div>
|
||||
<div class="flex-1 mx-3 text-muted">Loading...</div>
|
||||
<div class="flex-shrink-0 font-mono text-sm text-muted">...</div>
|
||||
<div class="flex items-center p-3 rounded-lg bg-dark animate-pulse">
|
||||
<div class="w-8 h-6 bg-darkless rounded"></div>
|
||||
<div class="w-8 h-8 bg-darkless rounded-full mx-3"></div>
|
||||
<div class="flex-1">
|
||||
<div class="h-4 w-24 bg-darkless rounded"></div>
|
||||
</div>
|
||||
<div class="h-4 w-16 bg-darkless rounded"></div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
|
|
|||
85
app/views/shared/_skeleton_loader.html.erb
Normal file
85
app/views/shared/_skeleton_loader.html.erb
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
<% type = local_assigns[:type] || :text_line %>
|
||||
<% count = local_assigns[:count] || 1 %>
|
||||
|
||||
<% case type %>
|
||||
<% when :stat_card %>
|
||||
<div class="stat-card animate-pulse">
|
||||
<div class="stat-label">
|
||||
<div class="h-3 w-20 bg-darkless rounded"></div>
|
||||
</div>
|
||||
<div class="stat-value">
|
||||
<div class="h-8 w-24 bg-darkless rounded mt-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<% when :stat_cards %>
|
||||
<div class="stats-section">
|
||||
<% 6.times do %>
|
||||
<div class="stat-card animate-pulse">
|
||||
<div class="stat-label">
|
||||
<div class="h-3 w-20 bg-darkless rounded"></div>
|
||||
</div>
|
||||
<div class="stat-value">
|
||||
<div class="h-8 w-24 bg-darkless rounded mt-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<% when :bar_graph %>
|
||||
<div class="card animate-pulse">
|
||||
<div class="h-6 w-40 bg-darkless rounded mb-4"></div>
|
||||
<div class="bar-graph space-y-3">
|
||||
<% 5.times do |i| %>
|
||||
<div class="bar-row flex items-center gap-3">
|
||||
<div class="h-4 w-24 bg-darkless rounded"></div>
|
||||
<div class="bar-container flex-1">
|
||||
<div class="h-6 bg-darkless rounded" style="width: <%= 100 - (i * 15) %>%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<% when :pie_chart %>
|
||||
<div class="card animate-pulse">
|
||||
<div class="h-6 w-32 bg-darkless rounded mb-4"></div>
|
||||
<div class="chart-container flex items-center justify-center">
|
||||
<div class="w-48 h-48 bg-darkless rounded-full"></div>
|
||||
<div class="ml-4 space-y-2">
|
||||
<% 5.times do %>
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-3 h-3 bg-darkless rounded"></div>
|
||||
<div class="h-3 w-16 bg-darkless rounded"></div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<% when :activity_graph %>
|
||||
<div class="w-full overflow-x-auto mt-6 pb-2.5 animate-pulse">
|
||||
<div class="grid grid-rows-7 grid-flow-col gap-1 w-full lg:w-1/2">
|
||||
<% 365.times do %>
|
||||
<div class="w-3 h-3 rounded-sm bg-darkless"></div>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="h-3 w-48 bg-darkless rounded mt-2"></div>
|
||||
</div>
|
||||
|
||||
<% when :text_line %>
|
||||
<% count.times do %>
|
||||
<div class="h-4 bg-darkless rounded animate-pulse mb-2" style="width: <%= rand(60..100) %>%"></div>
|
||||
<% end %>
|
||||
|
||||
<% when :filters %>
|
||||
<div class="filters-section animate-pulse">
|
||||
<% 5.times do %>
|
||||
<div class="filter">
|
||||
<div class="h-4 w-16 bg-darkless rounded mb-2"></div>
|
||||
<div class="h-10 w-full bg-darkless rounded"></div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<% end %>
|
||||
12
app/views/static_pages/_activity_graph_loading.html.erb
Normal file
12
app/views/static_pages/_activity_graph_loading.html.erb
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<%= turbo_frame_tag "activity_graph" do %>
|
||||
<div class="w-full overflow-x-auto mt-6 pb-2.5 animate-pulse">
|
||||
<div class="grid grid-rows-7 grid-flow-col gap-1 w-full lg:w-1/2">
|
||||
<% 365.times do %>
|
||||
<div class="w-3 h-3 rounded-sm bg-darkless opacity-50"></div>
|
||||
<% end %>
|
||||
</div>
|
||||
<p class="super mt-2">
|
||||
<span class="h-3 w-48 bg-darkless rounded inline-block"></span>
|
||||
</p>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
<%= turbo_frame_tag "filterable_dashboard" do %>
|
||||
<div class="content animate-pulse">
|
||||
<div class="filters-section">
|
||||
<% 5.times do %>
|
||||
<div class="filter">
|
||||
<div class="h-4 w-16 bg-darkless rounded mb-2"></div>
|
||||
<div class="h-10 w-full bg-darkless rounded"></div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-wrapper">
|
||||
<div class="stats-section">
|
||||
<% 6.times do %>
|
||||
<div class="stat-card animate-pulse">
|
||||
<div class="stat-label">
|
||||
<div class="h-3 w-20 bg-darkless rounded"></div>
|
||||
</div>
|
||||
<div class="stat-value">
|
||||
<div class="h-8 w-24 bg-darkless rounded mt-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-grid">
|
||||
<%# Project Durations skeleton %>
|
||||
<div class="card animate-pulse">
|
||||
<div class="h-6 w-40 bg-darkless rounded mb-4"></div>
|
||||
<div class="bar-graph space-y-3">
|
||||
<% 5.times do |i| %>
|
||||
<div class="bar-row flex items-center gap-3">
|
||||
<div class="h-4 w-24 bg-darkless rounded"></div>
|
||||
<div class="bar-container flex-1">
|
||||
<div class="h-6 bg-darkless rounded" style="width: <%= 100 - (i * 15) %>%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%# Language pie chart skeleton %>
|
||||
<div class="card animate-pulse">
|
||||
<div class="h-6 w-32 bg-darkless rounded mb-4"></div>
|
||||
<div class="chart-container flex items-center justify-center py-8">
|
||||
<div class="w-32 h-32 bg-darkless rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%# Editor pie chart skeleton %>
|
||||
<div class="card animate-pulse">
|
||||
<div class="h-6 w-24 bg-darkless rounded mb-4"></div>
|
||||
<div class="chart-container flex items-center justify-center py-8">
|
||||
<div class="w-32 h-32 bg-darkless rounded-full"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%# Project Timeline skeleton %>
|
||||
<div class="card animate-pulse">
|
||||
<div class="h-6 w-36 bg-darkless rounded mb-4"></div>
|
||||
<div class="chart-container flex items-end justify-between gap-1 py-8 h-48">
|
||||
<% 12.times do %>
|
||||
<div class="bg-darkless rounded" style="width: 8%; height: <%= rand(20..100) %>%"></div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<% end %>
|
||||
|
|
@ -190,7 +190,7 @@
|
|||
<% if current_user.github_uid.blank? %>
|
||||
<div class="bg-dark border border-primary rounded-lg p-4 mb-6">
|
||||
<div class="flex items-center gap-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="text-white flex-shrink-0"><path fill="currentColor" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2" /></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="text-white shrink-0"><path fill="currentColor" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2" /></svg>
|
||||
<div class="flex-1">
|
||||
<span class="text-white">Link your GitHub account to unlock project linking, show what you're working on, and qualify for leaderboards!</span>
|
||||
</div>
|
||||
|
|
@ -223,14 +223,14 @@
|
|||
No time logged today... but you can change that!
|
||||
<% end %>
|
||||
</p>
|
||||
<%= turbo_frame_tag "mini_leaderboard", src: mini_leaderboard_static_pages_path do %>
|
||||
<%= turbo_frame_tag "mini_leaderboard", src: mini_leaderboard_static_pages_path, loading: :lazy do %>
|
||||
<%= render "leaderboards/mini_leaderboard_loading" %>
|
||||
<% end %>
|
||||
<%= turbo_frame_tag "filterable_dashboard", src: filterable_dashboard_static_pages_path do %>
|
||||
<span>Loading...</span>
|
||||
<%= turbo_frame_tag "filterable_dashboard", src: filterable_dashboard_static_pages_path, loading: :lazy do %>
|
||||
<%= render "static_pages/filterable_dashboard_loading" %>
|
||||
<% end %>
|
||||
<%= turbo_frame_tag "activity_graph", src: activity_graph_static_pages_path do %>
|
||||
<span>Loading...</span>
|
||||
<%= turbo_frame_tag "activity_graph", src: activity_graph_static_pages_path, loading: :lazy do %>
|
||||
<%= render "static_pages/activity_graph_loading" %>
|
||||
<% end %>
|
||||
<% else %>
|
||||
<% if @leaderboard %>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue