GeneralBots/botui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(social): remove auto-loading API calls that cause 404 errors

Browse source 
- Remove hx-trigger='load' from social sidebar sections
- Replace loading placeholders with static empty state messages
- Add empty-state CSS styling
- Prevents page from breaking when backend APIs are not available
This commit is contained in:
Rodrigo Rodriguez (Pragmatismo) 2026-01-12 00:25:31 -03:00
parent 43be86bad4
commit 08469ecbf6
2 changed files with 41 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
ui/suite/social/social.css
View file

@ -290,20 +290,39 @@
}
@keyframes spin {
to { transform: rotate(360deg); }
to {
transform: rotate(360deg);
}
}
.loading-placeholder {
height: 60px;
background: linear-gradient(90deg, var(--bg) 25%, var(--surface-hover) 50%, var(--bg) 75%);
background: linear-gradient(
90deg,
var(--bg) 25%,
var(--surface-hover) 50%,
var(--bg) 75%
);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 6px;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
.empty-state {
color: var(--text-secondary);
font-size: 0.875rem;
text-align: center;
padding: 1rem;
margin: 0;
}
.modal {

67
ui/suite/social/social.html
View file

@ -86,36 +86,21 @@
<div class="social-layout">
<aside class="social-sidebar">
<div class="sidebar-section">
<h3 data-i18n="social-my-communities">My Communities</h3>
<div
id="my-communities"
hx-get="/api/ui/social/my-communities"
hx-trigger="load"
hx-swap="innerHTML"
>
<div class="loading-placeholder"></div>
<h3>My Communities</h3>
<div id="my-communities">
<p class="empty-state">No communities yet</p>
</div>
</div>
<div class="sidebar-section">
<h3 data-i18n="social-trending">Trending</h3>
<div
id="trending-topics"
hx-get="/api/ui/social/trending"
hx-trigger="load"
hx-swap="innerHTML"
>
<div class="loading-placeholder"></div>
<h3>Trending</h3>
<div id="trending-topics">
<p class="empty-state">No trending topics</p>
</div>
</div>
<div class="sidebar-section">
<h3 data-i18n="social-suggested">Suggested Communities</h3>
<div
id="suggested-communities"
hx-get="/api/ui/social/suggested"
hx-trigger="load"
hx-swap="innerHTML"
>
<div class="loading-placeholder"></div>
<h3>Suggested Communities</h3>
<div id="suggested-communities">
<p class="empty-state">No suggestions</p>
</div>
</div>
</aside>
@ -183,40 +168,24 @@
</div>
</div>
<div
id="social-content"
hx-get="/api/ui/social/feed"
hx-trigger="load"
hx-swap="innerHTML"
>
<div class="loading-state">
<div class="spinner"></div>
<span data-i18n="loading">Loading...</span>
<div id="social-content">
<div class="empty-feed">
<p>No posts yet. Be the first to share something!</p>
</div>
</div>
</main>
<aside class="social-right-sidebar">
<div class="sidebar-section">
<h3 data-i18n="social-recent-activity">Recent Activity</h3>
<div
id="recent-activity"
hx-get="/api/ui/social/activity"
hx-trigger="load"
hx-swap="innerHTML"
>
<div class="loading-placeholder"></div>
<h3>Recent Activity</h3>
<div id="recent-activity">
<p class="empty-state">No recent activity</p>
</div>
</div>
<div class="sidebar-section">
<h3 data-i18n="social-people">People to Follow</h3>
<div
id="people-suggestions"
hx-get="/api/ui/social/people"
hx-trigger="load"
hx-swap="innerHTML"
>
<div class="loading-placeholder"></div>
<h3>People to Follow</h3>
<div id="people-suggestions">
<p class="empty-state">No suggestions</p>
</div>
</div>
</aside>