export const linearGradient = ` `; export const barLoadingMarkup = ` ${linearGradient} `; export const donutLoadingMarkup = ` ${linearGradient} `; export const lineLoadingMarkup = ` ${linearGradient} `; export const stackedAreaLoadingMarkup = ` ${linearGradient} `; export const sparkLineLoadingMarkup = ` ${linearGradient} `; export const brushLoadingMarkup = ` ${linearGradient} `; /** * The heatmap's loading placeholder is a 12x5 grid of identical squares, so * they are generated rather than written out -- it is 60 rects, and the * skeleton stays readable without them. Everything else in this file is a * literal markup string. * @private */ const heatmapLoadingBoxes = (): string => { const columns = 12; const rows = 5; const size = 46; const gap = 10; const boxes: string[] = []; for (let row = 0; row < rows; row++) { for (let column = 0; column < columns; column++) { boxes.push( `` ); } } return boxes.join('\n '); }; export const heatmapLoadingMarkup = ` ${linearGradient} ${heatmapLoadingBoxes()} `; export const bulletLoadingMarkup = ` ${linearGradient} `; export const scatterPlotLoadingMarkup = ` ${linearGradient} `; export default { linearGradient, barLoadingMarkup, donutLoadingMarkup, lineLoadingMarkup, brushLoadingMarkup, sparkLineLoadingMarkup, stackedAreaLoadingMarkup, bulletLoadingMarkup, heatmapLoadingMarkup, scatterPlotLoadingMarkup, };