@visns-studio/visns-components 6.0.4 → 6.1.0

package/src/components/columns/ColumnRenderers.jsx

@@ -152,6 +152,40 @@ export const renderBooleanColumn = ({
         render: ({ data }) => {
             const rawValue = data[column.id];
             const formattedValue = formatCellContent(rawValue, { ...column, type: 'boolean' });
+
+            // Coloured pill variant — opt in via column.badge, matching the
+            // option renderer. A yes/no column rendered as plain text reads
+            // the same as every other cell, so the state has to be read
+            // rather than scanned. Without column.badge nothing changes.
+            if (column.badge) {
+                const on = Boolean(rawValue) && rawValue !== '0';
+                const palette = on
+                    ? (column.badgeOn || { bg: '#eaf6ef', fg: '#1f6b41' })
+                    : (column.badgeOff || { bg: '#f1f1ee', fg: '#6b7688' });
+
+                return (
+                    <CellWithTooltip value={rawValue} columnType="boolean">
+                        <span
+                            style={{
+                                display: 'inline-block',
+                                padding: '2px 10px',
+                                borderRadius: '999px',
+                                fontSize: '11px',
+                                fontWeight: 600,
+                                lineHeight: 1.6,
+                                letterSpacing: '0.02em',
+                                textTransform: 'uppercase',
+                                whiteSpace: 'nowrap',
+                                backgroundColor: palette.bg,
+                                color: palette.fg,
+                            }}
+                        >
+                            {formattedValue}
+                        </span>
+                    </CellWithTooltip>
+                );
+            }
+
             return (
                 <CellWithTooltip value={rawValue} columnType="boolean">
                     <span>{formattedValue}</span>

package/src/components/generic/GenericDashboard.jsx

@@ -575,6 +575,9 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
         )
     );
     const [data, setData] = useState({});
+    // Per-widget load state ('loading' | 'ready' | 'failed') keyed by widget.id.
+    // Tracked per widget so one slow/failed request only affects its own tile.
+    const [widgetStatus, setWidgetStatus] = useState({});
     const [dropdowns, setDropdowns] = useState({});
     const [filters, setFilters] = useState({});
     const [editMode, setEditMode] = useState(false);
@@ -631,8 +634,23 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
         updateDashboardSetting(dashboardSetting);
     }, [dashboardSetting]);
 
+    // A widget only fetches when it has both a url and a method — anything else
+    // never loads, so it must never be marked 'loading'.
+    const widgetFetches = (widget) => Boolean(widget.api?.url && widget.api?.method);
+
     const fetchData = async (appliedFilters = {}) => {
         try {
+            const loadingStatus = dashboardSetting.widgets.reduce(
+                (acc, widget) => {
+                    acc[widget.id] = widgetFetches(widget)
+                        ? 'loading'
+                        : 'ready';
+                    return acc;
+                },
+                {}
+            );
+            setWidgetStatus((prev) => ({ ...prev, ...loadingStatus }));
+
             const promises = dashboardSetting.widgets.map(async (widget) => {
                 const widgetFilters = appliedFilters[widget.id] || {};
 
@@ -714,9 +732,40 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
                 },
                 {}
             );
+            // Resolve each widget's status from the same settled results: a
+            // rejected promise or an API-error payload is a failure, anything
+            // else has finished loading.
+            const nextStatus = dashboardSetting.widgets.reduce(
+                (acc, widget, index) => {
+                    if (!widgetFetches(widget)) {
+                        acc[widget.id] = 'ready';
+                        return acc;
+                    }
+
+                    const result = results[index];
+                    acc[widget.id] =
+                        result?.status === 'rejected' ||
+                        result?.value?.data?.value
+                            ? 'failed'
+                            : 'ready';
+                    return acc;
+                },
+                {}
+            );
+
             setData(fetchedData);
+            setWidgetStatus((prev) => ({ ...prev, ...nextStatus }));
         } catch (error) {
             console.error('Error fetching dashboard data:', error);
+            // Never leave a widget stuck on a skeleton — a hard failure of the
+            // whole fetch marks everything still in flight as failed.
+            setWidgetStatus((prev) =>
+                Object.keys(prev).reduce((acc, widgetId) => {
+                    acc[widgetId] =
+                        prev[widgetId] === 'loading' ? 'failed' : prev[widgetId];
+                    return acc;
+                }, {})
+            );
         }
     };
 
@@ -1085,6 +1134,137 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
         );
     };
 
+    // Placeholder shaped like the widget's real content. Every block reserves
+    // the dimensions the loaded content occupies so nothing shifts on arrival.
+    const renderWidgetSkeleton = (widget) => {
+        const chartHeight = widget.height || '600px';
+        const block = (extraClass, style, key) => (
+            <div
+                key={key}
+                className={`${styles.skeletonBlock} ${extraClass}`}
+                style={style}
+            />
+        );
+
+        const renderBody = () => {
+            switch (widget.type) {
+                case 'counter':
+                    return (
+                        <>
+                            <div className={styles.skeletonCounter}>
+                                {block(styles.skeletonCounterValue)}
+                            </div>
+                            {widget.button && (
+                                <div className={styles.skeletonButtonRow}>
+                                    {block(styles.skeletonButton)}
+                                </div>
+                            )}
+                        </>
+                    );
+                case 'pie':
+                    return (
+                        <div
+                            className={styles.skeletonChart}
+                            style={{ height: chartHeight }}
+                        >
+                            {block(styles.skeletonCircle)}
+                        </div>
+                    );
+                case 'bar':
+                case 'line':
+                    return (
+                        <div
+                            className={`${styles.skeletonChart} ${styles.skeletonChartStrips}`}
+                            style={{ height: chartHeight }}
+                        >
+                            {[70, 45, 88, 58, 34].map((width, index) =>
+                                block(
+                                    styles.skeletonStrip,
+                                    { width: `${width}%` },
+                                    `${widget.id}-skeleton-strip-${index}`
+                                )
+                            )}
+                        </div>
+                    );
+                case 'table':
+                    return (
+                        <div
+                            className={styles.skeletonTable}
+                            style={
+                                widget.height
+                                    ? {
+                                          maxHeight: widget.height,
+                                          overflow: 'hidden',
+                                      }
+                                    : undefined
+                            }
+                        >
+                            {block(styles.skeletonTableHeader)}
+                            {[0, 1, 2, 3, 4].map((index) =>
+                                block(
+                                    styles.skeletonTableRow,
+                                    undefined,
+                                    `${widget.id}-skeleton-row-${index}`
+                                )
+                            )}
+                        </div>
+                    );
+                case 'list':
+                    return (
+                        <div className={styles.skeletonList}>
+                            {[0, 1, 2, 3].map((index) =>
+                                block(
+                                    styles.skeletonListRow,
+                                    undefined,
+                                    `${widget.id}-skeleton-list-${index}`
+                                )
+                            )}
+                        </div>
+                    );
+                case 'timeline':
+                    return block(styles.skeletonTimeline, {
+                        height: widget.height || '500px',
+                    });
+                default:
+                    return block(styles.skeletonGeneric);
+            }
+        };
+
+        return (
+            <div
+                className={styles.skeleton}
+                role="status"
+                aria-busy="true"
+                aria-label={`Loading ${widget.title || 'widget'}`}
+            >
+                {renderBody()}
+            </div>
+        );
+    };
+
+    // Skeletons show only until a widget has data for the first time: a
+    // background auto-refresh must never blank a value someone is reading.
+    const renderWidgetBody = (widget) => {
+        const status = widgetStatus[widget.id];
+        const hasLoadedOnce = data[widget.id] !== undefined;
+
+        if (!hasLoadedOnce) {
+            if (status === 'loading') {
+                return renderWidgetSkeleton(widget);
+            }
+
+            if (status === 'failed') {
+                return (
+                    <div className={styles.noData}>
+                        Couldn&apos;t load this widget.
+                    </div>
+                );
+            }
+        }
+
+        return renderWidget(widget);
+    };
+
     const renderWidget = (widget) => {
         const widgetData = data[widget.id] || [];
 
@@ -1914,7 +2094,7 @@ function GenericDashboard({ setting, userProfile, dynamicDashboard = false }) {
                         )}
                     </div>
                     {renderFilters(widget)}
-                    <div>{renderWidget(widget)}</div>
+                    <div>{renderWidgetBody(widget)}</div>
                     {editMode && (
                         <div className={styles.widgetTools}>
                             <div className={styles.resizeTools}>