IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

News: Add loading skeleton (#79009)

Browse Source 
* convert to emotion object syntax

* add news skeleton
This commit is contained in:
Ashley Harrison
2023-12-11 10:43:36 +00:00
committed by GitHub
parent 99d893fd30
commit bae9dbe418
3 changed files with 108 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
public/app/core/components/AppChrome/News/NewsWrapper.tsx
View File

@@ -3,7 +3,7 @@ import React, { useEffect } from 'react';
import { useMeasure } from 'react-use';
import { GrafanaTheme2 } from '@grafana/data';
import { LoadingPlaceholder, useStyles2 } from '@grafana/ui';
import { useStyles2 } from '@grafana/ui';
import { News } from 'app/plugins/panel/news/component/News';
import { useNewsFeed } from 'app/plugins/panel/news/useNewsFeed';
@@ -19,25 +19,28 @@ export function NewsWrapper({ feedUrl }: NewsWrapperProps) {
getNews();
}, [getNews]);
if (state.loading || state.error) {
return (
<div className={styles.innerWrapper}>
{state.loading && <LoadingPlaceholder text="Loading..." />}
{state.error && state.error.message}
</div>
);
}
if (!state.value) {
return null;
if (state.error) {
return <div className={styles.innerWrapper}>{state.error && state.error.message}</div>;
}
return (
<div ref={widthRef}>
{widthMeasure.width > 0 &&
state.value.map((_, index) => (
<News key={index} index={index} showImage width={widthMeasure.width} data={state.value} />
))}
{state.loading ? (
<>
<News.Skeleton showImage width={widthMeasure.width} />
<News.Skeleton showImage width={widthMeasure.width} />
<News.Skeleton showImage width={widthMeasure.width} />
<News.Skeleton showImage width={widthMeasure.width} />
<News.Skeleton showImage width={widthMeasure.width} />
</>
) : (
<>
{widthMeasure.width > 0 &&
state.value?.map((_, index) => (
<News key={index} index={index} showImage width={widthMeasure.width} data={state.value} />
))}
</>
)}
<div className={styles.grot}>
<a href="https://grafana.com/blog/" target="_blank" rel="noreferrer" title="Go to Grafana labs blog">
<img src="public/img/grot-news.svg" alt="Grot reading news" />