@cyber-harbour/ui 1.0.34 → 1.0.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyber-harbour/ui",
-  "version": "1.0.34",
+  "version": "1.0.36",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -29,6 +29,7 @@
   "dependencies": {
     "@types/d3-force": "^3.0.10",
     "d3-force": "^3.0.0",
+    "react-content-loader": "^7.0.2",
     "react-force-graph-2d": "^1.27.1",
     "react-tiny-popover": "^8.1.6",
     "styled-components": "^6.1.18"

package/src/Core/Header/Header.tsx

@@ -20,7 +20,7 @@ const StyledContainer = styled.header(
     padding-right: 20px;
     height: 56px;
     background-color: ${theme.colors.background};
-    border-bottom: 1px solid ${theme.colors.stroke.main};
+    border-bottom: 1px solid ${theme.colors.stroke.light};
 
     &:before {
       content: '';

package/src/Core/Sidebar/Sidebar.tsx

@@ -40,8 +40,8 @@ const StyledContainer = styled.aside<StyledProps>(
     width: ${theme.sidebar.width};
     padding: 12px;
     height: 100%;
-    border-right: 1px solid ${theme.colors.stroke.light};
-    background: ${theme.colors.background};
+    border-right: 1px solid ${theme.sidebar.border};
+    background: ${theme.sidebar.background};
     ${
       $collapsed
         ? `
@@ -60,7 +60,7 @@ const StyledContainer = styled.aside<StyledProps>(
       height: 25dvh;
       transform: translateY(-100%);
       background: ${theme.colors.background};
-      border-right: 1px solid ${theme.colors.stroke.light};
+      border-right: 1px solid ${theme.sidebar.border};
 
       width: ${theme.sidebar.width};
       ${

package/src/Core/Sidebar/SidebarDelimeter.tsx

@@ -16,7 +16,7 @@ const StyledDelimeter = styled.div<StyledProps>(
         min-width: 32px;
         width: 0;
 
-        border-bottom: 1px dashed ${theme.colors.stroke.main};
+        border-bottom: 1px dashed ${theme.sidebar.delimeter.color};
         margin-block: 8px;
         margin-left: 4px;
 

package/src/FullscreenCard/FullscreenCard.tsx

@@ -1,26 +1,57 @@
 import styled from 'styled-components';
+import { pxToRem } from '../Theme';
 
 interface FullscreenCardProps {
   children: any;
+  className?: string;
   position: 'absolute' | 'fixed';
   isActive: boolean;
+  top?: number;
+  left?: number;
+  right?: number;
+  bottom?: number;
 }
 
-export const FullscreenCard = ({ isActive, position, ...props }: FullscreenCardProps) => {
-  return <StyledContainer $isActive={isActive} $position={position} {...props} />;
+export const FullscreenCard = ({
+  isActive,
+  position,
+  top = 0,
+  left = 0,
+  right,
+  bottom,
+  ...props
+}: FullscreenCardProps) => {
+  return (
+    <StyledContainer
+      $isActive={isActive}
+      $position={position}
+      $top={top}
+      $left={left}
+      $right={right}
+      $bottom={bottom}
+      {...props}
+    />
+  );
 };
 
-const StyledContainer = styled.div<{ $isActive: boolean; $position: 'absolute' | 'fixed' }>(
-  ({ $isActive, $position }) => `
+const StyledContainer = styled.div<{
+  $isActive: boolean;
+  $top?: number;
+  $left?: number;
+  $right?: number;
+  $bottom?: number;
+  $position: 'absolute' | 'fixed';
+}>(
+  ({ $isActive, $top, $left, $right, $bottom, $position, theme }) => `
 ${
   $isActive
     ? `
       position: ${$position};
-      top: 0;
-      left: 0;
-      height: 100%;
-      width: 100%;
       z-index: 1000;
+      ${$top ? `top: ${pxToRem($top, theme.baseSize)};` : ''}
+      ${$left ? `left: ${pxToRem($left, theme.baseSize)};` : ''}
+      ${$right ? `right: ${pxToRem($right, theme.baseSize)};` : ''}
+      ${$bottom ? `bottom: ${pxToRem($bottom, theme.baseSize)};` : ''}
     `
     : ''
 }

package/src/Graph2D/Graph2D.tsx

@@ -2,13 +2,12 @@ import ForceGraph2D, { ForceGraphMethods, LinkObject, NodeObject } from 'react-f
 import { Graph2DProps } from './types';
 import { useEffect, useRef, useState, useCallback, useLayoutEffect } from 'react';
 import { forceCollide } from 'd3-force';
-import { styled } from 'styled-components';
+import { styled, useTheme } from 'styled-components';
 import eyeLightIcon from './eye_light.png';
 import eyeLightHoverIcon from './eye_light_hover.png';
-import crossLightIcon from './cross_light.png';
-import crossLightHoverIcon from './cross_light_hover.png';
-
-const ALPHA_MIN = 0.5;
+import groupLightIcon from './group_light.png';
+import groupLightHoverIcon from './group_light_hover.png';
+import GraphLoader from './GraphLoader';
 
 // Створюємо та налаштовуємо об'єкти зображень
 const imgEyeLightIcon = new Image();
@@ -17,11 +16,11 @@ imgEyeLightIcon.src = eyeLightIcon;
 const imgEyeLightHoverIcon = new Image();
 imgEyeLightHoverIcon.src = eyeLightHoverIcon;
 
-const imgCrossLightIcon = new Image();
-imgCrossLightIcon.src = crossLightIcon;
+const imgGroupLightIcon = new Image();
+imgGroupLightIcon.src = groupLightIcon;
 
-const imgCrossLightHoverIcon = new Image();
-imgCrossLightHoverIcon.src = crossLightHoverIcon;
+const imgGroupLightHoverIcon = new Image();
+imgGroupLightHoverIcon.src = groupLightHoverIcon;
 
 export const Graph2D = ({
   graphData,
@@ -29,6 +28,7 @@ export const Graph2D = ({
   height,
   linkTarget,
   linkSource,
+  loading = false,
   config = {
     fontSize: 3, // Максимальний розмір шрифту при максимальному зумі
     nodeSizeBase: 30, // Базовий розмір вузла
@@ -44,6 +44,8 @@ export const Graph2D = ({
   onLinkClick,
   onBackgroundClick,
 }: Graph2DProps) => {
+  const theme = useTheme();
+
   // Стан для підсвічування вузлів і зв'язків
   const [highlightNodes, setHighlightNodes] = useState(new Set());
   const [highlightLinks, setHighlightLinks] = useState(new Set());
@@ -83,7 +85,7 @@ export const Graph2D = ({
   };
 
   // Обробка подій наведення на вузол
-  const handleNodeHover = useCallback((node: NodeObject | null, _: NodeObject | null) => {
+  const handleNodeHover = (node: NodeObject | null, _: NodeObject | null) => {
     const newHighlightNodes = new Set();
     const newHighlightLinks = new Set();
 
@@ -106,10 +108,10 @@ export const Graph2D = ({
     setHoverNode(node || null);
     setHighlightNodes(newHighlightNodes);
     setHighlightLinks(newHighlightLinks);
-  }, []);
+  };
 
   // Обробка подій наведення на зв'язок
-  const handleLinkHover = useCallback((link: any) => {
+  const handleLinkHover = (link: any) => {
     const newHighlightNodes = new Set();
     const newHighlightLinks = new Set();
 
@@ -122,7 +124,7 @@ export const Graph2D = ({
 
     setHighlightNodes(newHighlightNodes);
     setHighlightLinks(newHighlightLinks);
-  }, []);
+  };
 
   const handleEngineTick = useCallback(() => {
     if (isRendering)
@@ -131,7 +133,7 @@ export const Graph2D = ({
         fgRef.current &&
         fgRef.current.tick &&
         graphData.nodes.length > 0 &&
-        graphData.nodes.length * ALPHA_MIN <= fgRef.current.tick
+        graphData.nodes.length <= fgRef.current.tick
       ) {
         if (tickTimerRef.current) {
           clearTimeout(tickTimerRef.current);
@@ -152,7 +154,7 @@ export const Graph2D = ({
   }, [graphData]);
 
   // Створення взаємозв'язків між вузлами
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (!graphData) return;
 
     // Прив'язка вузлів до їхніх сусідів та зв'язків
@@ -176,33 +178,14 @@ export const Graph2D = ({
       target.links.push(link);
     });
 
-    // Налаштування відстані між вузлами
-    fgRef.current?.d3Force('link')?.distance((link: any) => {
-      // Отримуємо вузли на кінцях зв'язку
-      const source = link.source;
-      const target = link.target;
-
-      // Базова відстань
-      const baseDistance = config.nodeSizeBase * 2;
-
-      // Динамічна відстань на основі розміру вузлів
-      // Більші вузли повинні бути далі один від одного
-      const sourceSizeBase = source.size || config.nodeSizeBase;
-      const targetSizeBase = target.size || config.nodeSizeBase;
-
-      // Відстань залежить від суми розмірів вузлів
-      // Додаємо базову відстань 100
-      return baseDistance + (sourceSizeBase + targetSizeBase);
-    });
-
     // Додаємо різні сили для уникнення перекриття вузлів
     if (fgRef.current) {
       // 1. Додаємо силу відштовхування між всіма вузлами (charge force)
       const chargeForce = fgRef.current.d3Force('charge');
       if (chargeForce) {
         chargeForce
-          .strength(-100) // Збільшуємо силу відштовхування (negative for repulsion)
-          .distanceMax(100); // Максимальна дистанція, на якій діє ця сила
+          .strength(config.nodeSizeBase) // Збільшуємо силу відштовхування (negative for repulsion)
+          .distanceMax(50); // Максимальна дистанція, на якій діє ця сила
       }
 
       // 2. Додаємо силу центрування для кращої організації графа
@@ -222,13 +205,21 @@ export const Graph2D = ({
           .iterations(3) // Більше ітерацій для точнішого розрахунку
           .strength(1); // Максимальна сила (1 - тверде обмеження)
 
-        fgRef.current.pauseAnimation().d3Force('collide', collideForce).resumeAnimation();
+        fgRef.current.d3Force('collide', collideForce);
       } catch (err) {
         console.error('Error setting up collision force:', err);
       }
     }
   }, [graphData]);
 
+  useEffect(() => {
+    if (!isRendering && fgRef.current) {
+      setIsRendering(true);
+      fgRef.current.tick = 0;
+      fgRef.current.d3ReheatSimulation();
+    }
+  }, [graphData]);
+
   // Функція для малювання кільця навколо підсвічених вузлів
   const paintRing = useCallback(
     (node: any, ctx: CanvasRenderingContext2D, globalScale: number) => {
@@ -238,7 +229,7 @@ export const Graph2D = ({
       // Малюємо кільце навколо вузла
       ctx.beginPath();
       ctx.arc(node.x, node.y, radius, 0, 2 * Math.PI, false);
-      ctx.fillStyle = 'rgba(255, 165, 0, 0.3)';
+      ctx.fillStyle = theme.graph2D.ring.highlightFill;
       ctx.fill();
     },
     [config]
@@ -257,9 +248,9 @@ export const Graph2D = ({
       ctx.beginPath();
       ctx.arc(x, y, buttonRadius, Math.PI, Math.PI * 2, false);
       ctx.lineWidth = 1;
-      ctx.strokeStyle = '#e5e5e5';
+      ctx.strokeStyle = theme.graph2D.button.stroke;
       ctx.stroke();
-      ctx.fillStyle = hoverTopButton ? 'rgba(230, 230, 230, 0.9)' : 'rgba(255, 255, 255, 0.8)';
+      ctx.fillStyle = hoverTopButton ? theme.graph2D.button.hoverFill : theme.graph2D.button.normalFill;
       ctx.fill();
 
       // Лінія розділення між кнопками
@@ -267,67 +258,68 @@ export const Graph2D = ({
       ctx.moveTo(x - buttonRadius, y);
       ctx.lineTo(x + buttonRadius, y);
       ctx.lineWidth = 1;
-      ctx.strokeStyle = '#e5e5e5';
+      ctx.strokeStyle = theme.graph2D.button.stroke;
       ctx.stroke();
 
       // Кнопка "згорнути" (нижня частина кільця)
       ctx.beginPath();
       ctx.arc(x, y, buttonRadius, Math.PI * 2, Math.PI, false);
       ctx.lineWidth = 1;
-      ctx.strokeStyle = '#e5e5e5';
+      ctx.strokeStyle = theme.graph2D.button.stroke;
       ctx.stroke();
-      ctx.fillStyle = hoverBottomButton ? 'rgba(230, 230, 230, 0.9)' : 'rgba(255, 255, 255, 0.8)';
+      ctx.fillStyle = hoverBottomButton ? theme.graph2D.button.hoverFill : theme.graph2D.button.normalFill;
       ctx.fill();
 
       // Додаємо іконку хрестика для кнопки "сховати вузол"
       const iconSize = buttonRadius * 0.3; // Розмір іконки відносно радіуса кнопки (зменшено вдвічі)
 
       // Вибір іконки в залежності від стану наведення для верхньої кнопки (сховати)
-      const crossIcon = hoverTopButton ? imgCrossLightHoverIcon : imgCrossLightIcon;
-      const renderCrossIcon = () => {
+      const groupIcon = hoverTopButton ? imgGroupLightHoverIcon : imgGroupLightIcon;
+      // Додаємо іконку ока для кнопки "згорнути дочірні вузли"
+      const eyeIcon = hoverBottomButton ? imgEyeLightHoverIcon : imgEyeLightIcon;
+
+      const renderEyeIcon = () => {
         try {
-          ctx.drawImage(crossIcon, x - iconSize / 2, y - (buttonRadius * 2) / 4 - iconSize - 1, iconSize, iconSize);
+          ctx.drawImage(eyeIcon, x - iconSize / 2, y - (buttonRadius * 2) / 4 - iconSize - 1, iconSize, iconSize);
         } catch (error) {
-          console.log('Error rendering cross icon:', error);
+          console.warn('Error rendering group icon:', error);
         }
       };
       // Використовуємо безпосередньо зображення, якщо воно вже завантажене
-      if (crossIcon.complete) {
+      if (eyeIcon.complete) {
         // Розміщуємо іконку в центрі верхньої половини кнопки
-        renderCrossIcon();
+        renderEyeIcon();
       } else {
         // Якщо зображення ще не завантажене, додаємо обробник завершення завантаження
-        crossIcon.onload = () => {
-          renderCrossIcon();
+        eyeIcon.onload = () => {
+          renderEyeIcon();
         };
 
-        crossIcon.onerror = () => {
-          console.log('Error loading cross icon image');
+        eyeIcon.onerror = () => {
+          console.warn('Error loading group icon image');
         };
       }
 
-      // Додаємо іконку ока для кнопки "згорнути дочірні вузли"
-      const eyeIcon = hoverBottomButton ? imgEyeLightHoverIcon : imgEyeLightIcon;
-      const renderEyeIcon = () => {
+      const renderGroupIcon = () => {
         try {
-          ctx.drawImage(eyeIcon, x - iconSize / 2, y + (buttonRadius * 2) / 4 + 1, iconSize, iconSize);
+          ctx.drawImage(groupIcon, x - iconSize / 2, y + (buttonRadius * 2) / 4 + 1, iconSize, iconSize);
         } catch (error) {
-          console.log('Error rendering eye icon:', error);
+          console.warn('Error rendering eye icon:', error);
         }
       };
       // Використовуємо безпосередньо зображення, якщо воно вже завантажене
       if (eyeIcon.complete) {
         // Розміщуємо іконку в центрі нижньої половини кнопки
 
-        renderEyeIcon();
+        renderGroupIcon();
       } else {
         // Якщо зображення ще не завантажене, додаємо обробник завершення завантаження
         eyeIcon.onload = () => {
-          renderEyeIcon();
+          renderGroupIcon();
         };
 
         eyeIcon.onerror = () => {
-          console.log('Error loading eye icon image');
+          console.warn('Error loading eye icon image');
         };
       }
 
@@ -581,7 +573,7 @@ export const Graph2D = ({
     const gridSpacing = config.gridSpacing;
     const dotSize = config.dotSize;
 
-    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+    ctx.fillStyle = theme.graph2D.grid.dotColor;
 
     for (let x = 0; x < width; x += gridSpacing) {
       for (let y = 0; y < height; y += gridSpacing) {
@@ -700,7 +692,7 @@ export const Graph2D = ({
     };
 
     // Малюємо лінію зв'язку з урахуванням місця для тексту, якщо він є
-    const lineColor = highlightLinks.has(link) ? '#ff9900' : '#999';
+    const lineColor = highlightLinks.has(link) ? theme.graph2D.link.highlighted : theme.graph2D.link.normal;
     const lineWidth = highlightLinks.has(link) ? 1.5 : 0.5;
 
     if (label) {
@@ -773,7 +765,7 @@ export const Graph2D = ({
     ctx.lineTo(-arrowHeadLength, -arrowHeadWidth);
     ctx.closePath();
 
-    ctx.fillStyle = highlightLinks.has(link) ? '#ff9900' : '#999';
+    ctx.fillStyle = highlightLinks.has(link) ? theme.graph2D.link.highlighted : theme.graph2D.link.normal;
     ctx.fill();
     ctx.restore();
 
@@ -787,7 +779,7 @@ export const Graph2D = ({
     // Використовуємо реверсивне масштабування для тексту
     const scaledFontSize = calculateFontSize(globalScale);
     ctx.font = `${scaledFontSize}px Sans-Serif`;
-    ctx.fillStyle = '#666'; // Колір тексту
+    ctx.fillStyle = theme.graph2D.link.textColor; // Колір тексту
     ctx.textAlign = 'center';
     ctx.textBaseline = 'middle';
 
@@ -807,7 +799,9 @@ export const Graph2D = ({
     // Рисуємо фон для тексту для кращої читаємості
     const textWidth = ctx.measureText(label).width;
     const padding = 2;
-    ctx.fillStyle = highlightLinks.has(link) ? 'rgba(255, 230, 204, 0.9)' : 'rgba(255, 255, 255, 0.8)';
+    ctx.fillStyle = highlightLinks.has(link)
+      ? theme.graph2D.link.highlightedTextBgColor
+      : theme.graph2D.link.textBgColor;
     ctx.fillRect(
       -textWidth / 2 - padding,
       -scaledFontSize / 2 - padding,
@@ -816,7 +810,7 @@ export const Graph2D = ({
     );
 
     // Малюємо текст
-    ctx.fillStyle = highlightLinks.has(link) ? '#663300' : '#666';
+    ctx.fillStyle = highlightLinks.has(link) ? theme.graph2D.link.highlightedTextColor : theme.graph2D.link.textColor;
     ctx.fillText(label, 0, 0);
 
     // Відновлення стану контексту
@@ -921,10 +915,12 @@ export const Graph2D = ({
 
   const handleBackgroundClick = (event: MouseEvent) => {
     setSelectedNode(null);
+    onBackgroundClick?.();
   };
 
   return (
     <Wrapper ref={wrapperRef}>
+      {(loading || isRendering) && <GraphLoader width={width} height={height} />}
       <ForceGraph2D
         ref={fgRef}
         width={width}
@@ -948,12 +944,14 @@ export const Graph2D = ({
         onNodeHover={handleNodeHover}
         onLinkHover={handleLinkHover}
         onEngineTick={handleEngineTick}
-        d3AlphaMin={ALPHA_MIN}
+        d3AlphaMin={0.001}
         d3VelocityDecay={0.4}
         d3AlphaDecay={0.038}
         // Виділення зв'язків при наведенні
         linkWidth={(link: any) => (highlightLinks.has(link) ? 3 : 1)}
-        linkColor={(link: any) => (highlightLinks.has(link) ? '#ff9900' : '#999')}
+        linkColor={(link: any) =>
+          highlightLinks.has(link) ? theme.graph2D.link.highlighted : theme.graph2D.link.normal
+        }
         onRenderFramePre={renderGrid}
         nodePointerAreaPaint={renderNodePointerAreaPaint}
         nodeCanvasObject={renderNodeCanvasObject}
@@ -984,5 +982,8 @@ export const Graph2D = ({
 };
 
 const Wrapper = styled.div`
-  display: inline-block;
+  display: block;
+  width: 100%;
+  min-width: 0;
+  position: relative;
 `;

package/src/Graph2D/GraphLoader.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import ContentLoader from 'react-content-loader';
+import styled from 'styled-components';
+
+const LoaderWrapper = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+`;
+
+interface GraphLoaderProps {
+  width?: number;
+  height?: number;
+}
+
+const GraphLoader: React.FC<GraphLoaderProps> = ({ width = 280, height = 280 }) => {
+  // Helper function to create a rect from line coordinates
+  const lineToRect = (x1: number, y1: number, x2: number, y2: number, thickness: number = 1) => {
+    // Calculate length and angle of the line
+    const length = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
+    const angle = (Math.atan2(y2 - y1, x2 - x1) * 180) / Math.PI;
+
+    // Calculate center point of the line
+    const centerX = (x1 + x2) / 2;
+    const centerY = (y1 + y2) / 2;
+
+    return (
+      <rect
+        x={centerX - length / 2}
+        y={centerY - thickness / 2}
+        width={length}
+        height={thickness}
+        transform={`rotate(${angle}, ${centerX}, ${centerY})`}
+      />
+    );
+  };
+
+  return (
+    <LoaderWrapper>
+      <ContentLoader width={width} height={height} viewBox="0 0 280 280">
+        <path d="m55 38-0.97266 0.22852 7.0801 30.092-18.355-20.979-0.75195 0.6582 19.596 22.395 0.43164 1.834 0.97266-0.22852 0.75195-0.6582-0.37695-0.42969 9.625-27.912-0.94531-0.32617-9.4375 27.371-0.10547-0.12109zm8 34-0.78516 0.61914 0.0957 0.12305-12.311 13.258 0.73242 0.67969 12.205-13.145 14.277 18.084 0.78516-0.61914-14.373-18.207 0.10547-0.11328zm15 19-0.48438 0.875 46.992 25.996 8e-3 4e-3 20.506 11.592-28.182 4.5449 0.15998 0.98819 29.418-4.7441 0.25 0.14062-12.555 24.143 0.88672 0.46094 13-25 15 25 26 30v18l-11 18 0.85352 0.52148 9.8008-16.039-4.6543 33.518 0.99023 0.13867 4.7793-34.408 7.2305 16.27 0.91406-0.40625-7.9141-17.807v-17.104l18 12.316 0.56445-0.82617-18.896-12.928-25.855-29.836-14.633-24.387 0.01562-0.02344h23.805v-1h-23.152l13.848-21.234 55.201-28.791-0.45898-0.88476 0.77734 0.62305 11.402-14.25 16.668-11.842-0.58008-0.81641-16.785 11.928-11.486 14.355-55.434 28.912-14.277 21.893-7.7617-27.166-0.96094 0.27344 7.7227 27.031-1.1191 0.17969-21.604-12.211zm140.43-12.912-6.957-17.338-0.92773 0.37305 6.957 17.338zm-6.957-17.338 0.72266 0.69336 16.232-16.896-0.7207-0.69336zm-3.4766 137.25 5 15 0.94922-0.31641-5-15zm-91-63-0.48047-0.87695-31 17 0.48047 0.87695zm-31 17 5 18 0.96289-0.26758-5-18zm0 0-0.70703-0.70703-12.898 12.898-17.881 9.9336 0.48633 0.875 18-10zm5 18-0.64062-0.76758-18 15 0.64062 0.76758z" />
+        <circle cx="229.92" cy="63.7318" r="5" transform="rotate(173.661 229.92 63.7318)" />
+        <circle cx="227.711" cy="43.8541" r="5" transform="rotate(173.661 227.711 43.8541)" />
+        <circle cx="211.478" cy="60.7499" r="5" transform="rotate(173.661 211.478 60.7499)" />
+        <circle cx="218.434" cy="78.0877" r="5" transform="rotate(173.661 218.434 78.0877)" />
+        <circle cx="246.705" cy="51.8054" r="5" transform="rotate(173.661 246.705 51.8054)" />
+        <circle cx="42" cy="48" r="5" />
+        <circle cx="55" cy="38" r="5" />
+        <circle cx="73" cy="43" r="5" />
+        <circle cx="63" cy="72" r="5" />
+        <circle cx="50" cy="86" r="5" />
+        <circle cx="78" cy="91" r="5" />
+        <circle cx="73" cy="165" r="5" />
+        <circle cx="73" cy="185" r="5" />
+        <circle cx="91" cy="170" r="5" />
+        <circle cx="86" cy="152" r="5" />
+        <circle cx="148" cy="130" r="5" />
+        <circle cx="189" cy="185" r="5" />
+        <circle cx="163" cy="107" r="5" />
+        <circle cx="140" cy="102" r="5" />
+        <circle cx="117" cy="135" r="5" />
+        <circle cx="125" cy="117" r="5" />
+        <circle cx="208" cy="198" r="5" />
+        <circle cx="189" cy="203" r="5" />
+        <circle cx="198" cy="221" r="5" />
+        <circle cx="178" cy="221" r="5" />
+        <circle cx="184" cy="239" r="5" />
+        <circle cx="213" cy="213" r="5" />
+        <circle cx="173" cy="130" r="5" />
+        <circle cx="163" cy="155" r="5" />
+        <circle cx="135" cy="155" r="5" />
+        <circle cx="55" cy="175" r="5" />
+      </ContentLoader>
+    </LoaderWrapper>
+  );
+};
+
+export default GraphLoader;

package/src/Graph2D/types.ts

@@ -4,6 +4,7 @@ export interface Graph2DProps {
   graphData?: GraphData;
   linkSource?: string;
   linkTarget?: string;
+  loading?: boolean;
 
   // Container layout
   width?: number;

package/src/Layouts/PageLayout/PageLayout.tsx

@@ -54,6 +54,9 @@ export const StyledContainer = styled.div<StyledContainerProps>(
 `
 );
 
-const StyledMain = styled.main`
-  min-width: 0;
-`;
+const StyledMain = styled.main(
+  ({ theme }) => `
+    min-width: 0;
+    background: ${theme.colors.backgroundBase};
+  `
+);

package/src/Theme/ThemeProvider.tsx

@@ -1,11 +1,17 @@
 import { StyleSheetManager, ThemeProvider as ThemeProviderStyled, WebTarget } from 'styled-components';
-import { lightTheme } from './theme';
+import { lightTheme, darkTheme } from './themes';
 import { GlobalStyle } from './GlobalStyle';
 
-export const ThemeProvider = ({ children }: { children: any }) => {
+interface ThemeProviderProps {
+  children: any;
+  mode?: 'light' | 'LIGHT' | 'dark' | 'DARK';
+}
+
+export type ThemeMode = 'light' | 'LIGHT' | 'dark' | 'DARK';
+export const ThemeProvider = ({ children, mode }: ThemeProviderProps) => {
   return (
     <StyleSheetManager shouldForwardProp={shouldForwardProp}>
-      <ThemeProviderStyled theme={lightTheme}>
+      <ThemeProviderStyled theme={mode == 'light' || mode === 'LIGHT' ? lightTheme : darkTheme}>
         <GlobalStyle />
         {children}
       </ThemeProviderStyled>

package/src/Theme/index.ts

@@ -2,5 +2,5 @@ export * from './GlobalStyle';
 export * from './ThemeProvider';
 export * from './utils';
 export * from './types';
-export * from './theme';
+export * from './themes';
 export * from './componentFabric';