| 1 |
import React from "react"; |
| 2 |
import Skeleton, { SkeletonTheme } from "react-loading-skeleton"; |
| 3 |
import "react-loading-skeleton/dist/skeleton.css"; |
| 4 |
|
| 5 |
// Match the plugin's other skeletons (e.g. GridLoader): a flat var(--text-color-150) |
| 6 |
// fill — base === highlight, so no shimmer — instead of react-loading-skeleton's |
| 7 |
// default #ebebeb, which looked different from the rest of the dashboard. |
| 8 |
const SK = { baseColor: "var(--text-color-150)", highlightColor: "var(--text-color-150)" }; |
| 9 |
|
| 10 |
/** |
| 11 |
* Loading skeleton shaped exactly like the "No Category Found" empty card |
| 12 |
* (NoDocsBody). Shown while the All Docs panel loads on a known-empty knowledge |
| 13 |
* base (betterdocs_admin.kb_is_empty), so an empty install transitions |
| 14 |
* skeleton-card -> empty card with no misleading category/docs skeleton in |
| 15 |
* between. Reuses NoDocsBody's wrapper classes so the card frame, padding and |
| 16 |
* centering match 1:1; only the content is replaced with skeleton blocks. |
| 17 |
*/ |
| 18 |
const NoDocsLoader = () => ( |
| 19 |
<section className="betterdocs-dashboard-body"> |
| 20 |
<SkeletonTheme {...SK}> |
| 21 |
<div className="betterdocs-no-docs-wrapper betterdocs-sd-empty-card"> |
| 22 |
<div className="betterdocs-no-docs-img-wrap"> |
| 23 |
<Skeleton height={90} width={103} borderRadius={12} /> |
| 24 |
</div> |
| 25 |
|
| 26 |
<div className="betterdocs-no-docs-content"> |
| 27 |
<h3 className="betterdocs-no-docs-title"> |
| 28 |
<Skeleton height={26} width={220} borderRadius={6} /> |
| 29 |
</h3> |
| 30 |
<p className="betterdocs-no-docs-text"> |
| 31 |
<Skeleton height={15} count={2} borderRadius={4} /> |
| 32 |
</p> |
| 33 |
|
| 34 |
<div className="betterdocs-sd-empty-actions"> |
| 35 |
<Skeleton height={48} borderRadius={8} /> |
| 36 |
<Skeleton height={48} borderRadius={8} /> |
| 37 |
</div> |
| 38 |
|
| 39 |
<div className="betterdocs-sd-empty-badge"> |
| 40 |
<Skeleton height={20} width={130} borderRadius={10} /> |
| 41 |
</div> |
| 42 |
</div> |
| 43 |
</div> |
| 44 |
</SkeletonTheme> |
| 45 |
</section> |
| 46 |
); |
| 47 |
|
| 48 |
export default NoDocsLoader; |
| 49 |
|
