@rmdes/indiekit-endpoint-activitypub 2.5.4 → 2.5.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/assets/reader.css +75 -0
  2. package/package.json +1 -1
  3. package/views/activitypub-explore.njk +27 -17
  4. package/views/activitypub-reader.njk +7 -3
  5. package/views/activitypub-tag-timeline.njk +7 -3
  6. package/views/partials/ap-skeleton-card.njk +15 -0
package/assets/reader.css CHANGED
@@ -1595,6 +1595,81 @@
1595
1595
  cursor: pointer;
1596
1596
  }
1597
1597
 
1598
+ /* ==========================================================================
1599
+ Skeleton Loaders
1600
+ ========================================================================== */
1601
+
1602
+ @keyframes ap-skeleton-shimmer {
1603
+ 0% { background-position: 200% 0; }
1604
+ 100% { background-position: -200% 0; }
1605
+ }
1606
+
1607
+ .ap-skeleton {
1608
+ background: linear-gradient(90deg,
1609
+ var(--color-offset) 25%,
1610
+ var(--color-background) 50%,
1611
+ var(--color-offset) 75%);
1612
+ background-size: 200% 100%;
1613
+ animation: ap-skeleton-shimmer 1.5s ease-in-out infinite;
1614
+ border-radius: var(--border-radius-small);
1615
+ }
1616
+
1617
+ .ap-card--skeleton {
1618
+ pointer-events: none;
1619
+ }
1620
+
1621
+ .ap-card--skeleton .ap-card__author {
1622
+ display: flex;
1623
+ align-items: center;
1624
+ gap: var(--space-s);
1625
+ }
1626
+
1627
+ .ap-skeleton--avatar {
1628
+ width: 2.5rem;
1629
+ height: 2.5rem;
1630
+ border-radius: 50%;
1631
+ flex-shrink: 0;
1632
+ }
1633
+
1634
+ .ap-skeleton-lines {
1635
+ flex: 1;
1636
+ display: flex;
1637
+ flex-direction: column;
1638
+ gap: 0.4rem;
1639
+ }
1640
+
1641
+ .ap-skeleton--name {
1642
+ height: 0.85rem;
1643
+ width: 40%;
1644
+ }
1645
+
1646
+ .ap-skeleton--handle {
1647
+ height: 0.7rem;
1648
+ width: 25%;
1649
+ }
1650
+
1651
+ .ap-skeleton-body {
1652
+ display: flex;
1653
+ flex-direction: column;
1654
+ gap: 0.5rem;
1655
+ margin-top: var(--space-s);
1656
+ }
1657
+
1658
+ .ap-skeleton--line {
1659
+ height: 0.75rem;
1660
+ width: 100%;
1661
+ }
1662
+
1663
+ .ap-skeleton--short {
1664
+ width: 60%;
1665
+ }
1666
+
1667
+ .ap-skeleton-group {
1668
+ display: flex;
1669
+ flex-direction: column;
1670
+ gap: var(--space-m);
1671
+ }
1672
+
1598
1673
  /* ==========================================================================
1599
1674
  Responsive
1600
1675
  ========================================================================== */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rmdes/indiekit-endpoint-activitypub",
3
- "version": "2.5.4",
3
+ "version": "2.5.5",
4
4
  "description": "ActivityPub federation endpoint for Indiekit via Fedify. Adds full fediverse support: actor, inbox, outbox, followers, following, syndication, and Mastodon migration.",
5
5
  "keywords": [
6
6
  "indiekit",
package/views/activitypub-explore.njk CHANGED
@@ -256,10 +256,14 @@
256
256
  x-data="apInfiniteScroll()"
257
257
  x-init="init()">
258
258
  <div class="ap-load-more__sentinel" x-ref="sentinel"></div>
259
- <button class="ap-load-more__btn" @click="loadMore()" :disabled="loading" x-show="!done">
260
- <span x-show="!loading">{{ __("activitypub.reader.pagination.loadMore") }}</span>
261
- <span x-show="loading">{{ __("activitypub.reader.pagination.loading") }}</span>
259
+ <button class="ap-load-more__btn" @click="loadMore()" :disabled="loading" x-show="!done && !loading">
260
+ {{ __("activitypub.reader.pagination.loadMore") }}
262
261
  </button>
262
+ <div class="ap-skeleton-group" x-show="loading" x-cloak>
263
+ {% include "partials/ap-skeleton-card.njk" %}
264
+ {% include "partials/ap-skeleton-card.njk" %}
265
+ {% include "partials/ap-skeleton-card.njk" %}
266
+ </div>
263
267
  <p class="ap-load-more__done" x-show="done" x-cloak>{{ __("activitypub.reader.pagination.noMore") }}</p>
264
268
  </div>
265
269
  {% endif %}
@@ -283,10 +287,12 @@
283
287
  <template x-if="tab.type === 'instance'">
284
288
  <div class="ap-explore-instance-panel">
285
289
 
286
- {# Loading spinner — first load, no content yet #}
287
- <div class="ap-explore-tab-loading"
290
+ {# Skeleton loaders — first load, no content yet #}
291
+ <div class="ap-skeleton-group"
288
292
  x-show="tabState[tab._id] && tabState[tab._id].loading && !tabState[tab._id].html">
289
- <span class="ap-explore-tab-loading__text">{{ __("activitypub.reader.pagination.loading") }}</span>
293
+ {% include "partials/ap-skeleton-card.njk" %}
294
+ {% include "partials/ap-skeleton-card.njk" %}
295
+ {% include "partials/ap-skeleton-card.njk" %}
290
296
  </div>
291
297
 
292
298
  {# Error state with retry #}
@@ -304,7 +310,7 @@
304
310
  x-html="tabState[tab._id] ? tabState[tab._id].html : ''">
305
311
  </div>
306
312
 
307
- {# Load more button + loading spinner for subsequent pages #}
313
+ {# Load more button + skeleton loaders for subsequent pages #}
308
314
  <div class="ap-load-more"
309
315
  x-show="tabState[tab._id] && tabState[tab._id].html && !tabState[tab._id].done">
310
316
  <button class="ap-load-more__btn"
@@ -313,10 +319,11 @@
313
319
  :disabled="tabState[tab._id]?.loading">
314
320
  {{ __("activitypub.reader.pagination.loadMore") }}
315
321
  </button>
316
- <span class="ap-explore-tab-loading__text"
322
+ <div class="ap-skeleton-group"
317
323
  x-show="tabState[tab._id]?.loading">
318
- {{ __("activitypub.reader.pagination.loading") }}
319
- </span>
324
+ {% include "partials/ap-skeleton-card.njk" %}
325
+ {% include "partials/ap-skeleton-card.njk" %}
326
+ </div>
320
327
  </div>
321
328
 
322
329
  {# Empty state — loaded successfully but no posts #}
@@ -347,10 +354,12 @@
347
354
  x-text="hashtagSourcesLine(tab)"
348
355
  x-cloak></p>
349
356
 
350
- {# Loading spinner — first load, no content yet #}
351
- <div class="ap-explore-tab-loading"
357
+ {# Skeleton loaders — first load, no content yet #}
358
+ <div class="ap-skeleton-group"
352
359
  x-show="tabState[tab._id] && tabState[tab._id].loading && !tabState[tab._id].html">
353
- <span class="ap-explore-tab-loading__text">{{ __("activitypub.reader.pagination.loading") }}</span>
360
+ {% include "partials/ap-skeleton-card.njk" %}
361
+ {% include "partials/ap-skeleton-card.njk" %}
362
+ {% include "partials/ap-skeleton-card.njk" %}
354
363
  </div>
355
364
 
356
365
  {# Error state with retry #}
@@ -368,7 +377,7 @@
368
377
  x-html="tabState[tab._id] ? tabState[tab._id].html : ''">
369
378
  </div>
370
379
 
371
- {# Load more button + loading spinner for subsequent pages #}
380
+ {# Load more button + skeleton loaders for subsequent pages #}
372
381
  <div class="ap-load-more"
373
382
  x-show="tabState[tab._id] && tabState[tab._id].html && !tabState[tab._id].done">
374
383
  <button class="ap-load-more__btn"
@@ -377,10 +386,11 @@
377
386
  :disabled="tabState[tab._id]?.loading">
378
387
  {{ __("activitypub.reader.pagination.loadMore") }}
379
388
  </button>
380
- <span class="ap-explore-tab-loading__text"
389
+ <div class="ap-skeleton-group"
381
390
  x-show="tabState[tab._id]?.loading">
382
- {{ __("activitypub.reader.pagination.loading") }}
383
- </span>
391
+ {% include "partials/ap-skeleton-card.njk" %}
392
+ {% include "partials/ap-skeleton-card.njk" %}
393
+ </div>
384
394
  </div>
385
395
 
386
396
  {# Empty state — no instance tabs pinned yet #}
package/views/activitypub-reader.njk CHANGED
@@ -150,10 +150,14 @@
150
150
  x-data="apInfiniteScroll()"
151
151
  x-init="init()">
152
152
  <div class="ap-load-more__sentinel" x-ref="sentinel"></div>
153
- <button class="ap-load-more__btn" @click="loadMore()" :disabled="loading" x-show="!done">
154
- <span x-show="!loading">{{ __("activitypub.reader.pagination.loadMore") }}</span>
155
- <span x-show="loading">{{ __("activitypub.reader.pagination.loading") }}</span>
153
+ <button class="ap-load-more__btn" @click="loadMore()" :disabled="loading" x-show="!done && !loading">
154
+ {{ __("activitypub.reader.pagination.loadMore") }}
156
155
  </button>
156
+ <div class="ap-skeleton-group" x-show="loading" x-cloak>
157
+ {% include "partials/ap-skeleton-card.njk" %}
158
+ {% include "partials/ap-skeleton-card.njk" %}
159
+ {% include "partials/ap-skeleton-card.njk" %}
160
+ </div>
157
161
  <p class="ap-load-more__done" x-show="done" x-cloak>{{ __("activitypub.reader.pagination.noMore") }}</p>
158
162
  </div>
159
163
  {% endif %}
package/views/activitypub-tag-timeline.njk CHANGED
@@ -75,10 +75,14 @@
75
75
  x-data="apInfiniteScroll()"
76
76
  x-init="init()">
77
77
  <div class="ap-load-more__sentinel" x-ref="sentinel"></div>
78
- <button class="ap-load-more__btn" @click="loadMore()" :disabled="loading" x-show="!done">
79
- <span x-show="!loading">{{ __("activitypub.reader.pagination.loadMore") }}</span>
80
- <span x-show="loading">{{ __("activitypub.reader.pagination.loading") }}</span>
78
+ <button class="ap-load-more__btn" @click="loadMore()" :disabled="loading" x-show="!done && !loading">
79
+ {{ __("activitypub.reader.pagination.loadMore") }}
81
80
  </button>
81
+ <div class="ap-skeleton-group" x-show="loading" x-cloak>
82
+ {% include "partials/ap-skeleton-card.njk" %}
83
+ {% include "partials/ap-skeleton-card.njk" %}
84
+ {% include "partials/ap-skeleton-card.njk" %}
85
+ </div>
82
86
  <p class="ap-load-more__done" x-show="done">{{ __("activitypub.reader.pagination.noMore") }}</p>
83
87
  </div>
84
88
  {% endif %}
package/views/partials/ap-skeleton-card.njk ADDED
@@ -0,0 +1,15 @@
1
+ {# Skeleton loading card — animated placeholder while content loads #}
2
+ <div class="ap-card ap-card--skeleton" aria-hidden="true">
3
+ <header class="ap-card__author">
4
+ <div class="ap-skeleton ap-skeleton--avatar"></div>
5
+ <div class="ap-skeleton-lines">
6
+ <div class="ap-skeleton ap-skeleton--name"></div>
7
+ <div class="ap-skeleton ap-skeleton--handle"></div>
8
+ </div>
9
+ </header>
10
+ <div class="ap-skeleton-body">
11
+ <div class="ap-skeleton ap-skeleton--line"></div>
12
+ <div class="ap-skeleton ap-skeleton--line"></div>
13
+ <div class="ap-skeleton ap-skeleton--line ap-skeleton--short"></div>
14
+ </div>
15
+ </div>