@desynova-digital/components 8.19.12 → 8.19.14

package/atoms/loader/ShimmerComponent/CollabErrorScreen.js

@@ -0,0 +1,64 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _templateObject = _taggedTemplateLiteral(['\n  height: 500px;\n  width: 700px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n'], ['\n  height: 500px;\n  width: 700px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n']),
+    _templateObject2 = _taggedTemplateLiteral(['\n  height: 200px;\n  width: 700px; \n  position: relative;\n  display: flex;\n  justify-content: center;\n\n  .rectangeDiv {\n    width: 104px;\n    height: 126px;\n    position: absolute;\n    z-index: 2;\n    top: 0px;\n  }\n  .circleDiv {\n    width: 150px;\n    height: 150px;\n    border-radius: 50%;\n    background:rgba(255, 255, 255, 0.20);\n    position: absolute;\n    bottom: 0px;\n    display: flex;\n    justify-content: center;\n  }\n  .ellipse {\n    width: 104px;\n    \n    height: 7px;\n    border-radius: 50%;\n    background-color: #FFFFFF33\n    position: absolute;\n    bottom: 30px;\n  }\n  .div1 {\n    position:absolute;\n    background: #ccc;\n    border-radius: 15px;\n    width: 104px;\n    height: 126px;\n    \n\n  }\n  .div2 {\n    position:absolute;\n    width: 104px;\n    height: 126px;\n    border-radius:15px;\n    background: #FFFFFF33;\n    transform: rotate(-12.151deg);\n  }\n'], ['\n  height: 200px;\n  width: 700px; \n  position: relative;\n  display: flex;\n  justify-content: center;\n\n  .rectangeDiv {\n    width: 104px;\n    height: 126px;\n    position: absolute;\n    z-index: 2;\n    top: 0px;\n  }\n  .circleDiv {\n    width: 150px;\n    height: 150px;\n    border-radius: 50%;\n    background:rgba(255, 255, 255, 0.20);\n    position: absolute;\n    bottom: 0px;\n    display: flex;\n    justify-content: center;\n  }\n  .ellipse {\n    width: 104px;\n    \n    height: 7px;\n    border-radius: 50%;\n    background-color: #FFFFFF33\n    position: absolute;\n    bottom: 30px;\n  }\n  .div1 {\n    position:absolute;\n    background: #ccc;\n    border-radius: 15px;\n    width: 104px;\n    height: 126px;\n    \n\n  }\n  .div2 {\n    position:absolute;\n    width: 104px;\n    height: 126px;\n    border-radius:15px;\n    background: #FFFFFF33;\n    transform: rotate(-12.151deg);\n  }\n']),
+    _templateObject3 = _taggedTemplateLiteral(['\n  height: 100px;\n  width: 700px;\n\n  z-index: 2;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  .text1 {\n    color: var(--color-text-color-text-300, #ccc);\n\n    font-size: 40px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 50px;\n  }\n\n  .text2 {\n    color: var(--color-text-color-text-300, #ccc);\n\n    /* Text-md/Light-14px */\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 300;\n    line-height: 21px;\n  }\n'], ['\n  height: 100px;\n  width: 700px;\n\n  z-index: 2;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  .text1 {\n    color: var(--color-text-color-text-300, #ccc);\n\n    font-size: 40px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 50px;\n  }\n\n  .text2 {\n    color: var(--color-text-color-text-300, #ccc);\n\n    /* Text-md/Light-14px */\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 300;\n    line-height: 21px;\n  }\n']);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _styledComponents = require('styled-components');
+
+var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var OuterDiv = _styledComponents2.default.div(_templateObject);
+
+var IconDiv = _styledComponents2.default.div(_templateObject2);
+var TextDiv = _styledComponents2.default.div(_templateObject3);
+
+var CollabErrorScreen = function CollabErrorScreen() {
+  return _react2.default.createElement(
+    OuterDiv,
+    null,
+    _react2.default.createElement(
+      IconDiv,
+      null,
+      _react2.default.createElement(
+        'div',
+        { className: 'rectangeDiv' },
+        _react2.default.createElement('div', { className: 'div1' }),
+        _react2.default.createElement('div', { className: 'div2' })
+      ),
+      _react2.default.createElement(
+        'div',
+        { className: 'circleDiv' },
+        _react2.default.createElement('div', { className: 'ellipse' })
+      )
+    ),
+    _react2.default.createElement(
+      TextDiv,
+      null,
+      _react2.default.createElement(
+        'h2',
+        { className: 'text1' },
+        'No Data Available'
+      ),
+      _react2.default.createElement(
+        'p',
+        { className: 'text2' },
+        'Sorry, no data at the moment. Stay tuned for updates.'
+      )
+    )
+  );
+};
+
+exports.default = CollabErrorScreen;

package/atoms/loader/ShimmerComponent/CollabErrorScreen.jsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const OuterDiv = styled.div`
+  height: 500px;
+  width: 700px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+`;
+
+const IconDiv = styled.div`
+  height: 200px;
+  width: 700px; 
+  position: relative;
+  display: flex;
+  justify-content: center;
+
+  .rectangeDiv {
+    width: 104px;
+    height: 126px;
+    position: absolute;
+    z-index: 2;
+    top: 0px;
+  }
+  .circleDiv {
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+    background:rgba(255, 255, 255, 0.20);
+    position: absolute;
+    bottom: 0px;
+    display: flex;
+    justify-content: center;
+  }
+  .ellipse {
+    width: 104px;
+    
+    height: 7px;
+    border-radius: 50%;
+    background-color: #FFFFFF33
+    position: absolute;
+    bottom: 30px;
+  }
+  .div1 {
+    position:absolute;
+    background: #ccc;
+    border-radius: 15px;
+    width: 104px;
+    height: 126px;
+    
+
+  }
+  .div2 {
+    position:absolute;
+    width: 104px;
+    height: 126px;
+    border-radius:15px;
+    background: #FFFFFF33;
+    transform: rotate(-12.151deg);
+  }
+`;
+const TextDiv = styled.div`
+  height: 100px;
+  width: 700px;
+
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  .text1 {
+    color: var(--color-text-color-text-300, #ccc);
+
+    font-size: 40px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 50px;
+  }
+
+  .text2 {
+    color: var(--color-text-color-text-300, #ccc);
+
+    /* Text-md/Light-14px */
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 300;
+    line-height: 21px;
+  }
+`;
+
+const CollabErrorScreen = () => {
+  return (
+    <OuterDiv>
+      <IconDiv>
+        <div className="rectangeDiv">
+          <div className="div1"></div>
+          <div className="div2"></div>
+        </div>
+        <div className="circleDiv">
+          <div className="ellipse"></div>
+        </div>
+      </IconDiv>
+      <TextDiv>
+        <h2 className="text1">No Data Available</h2>
+        <p className="text2">Sorry, no data at the moment. Stay tuned for updates.</p>
+      </TextDiv>
+    </OuterDiv>
+  );
+};
+
+export default CollabErrorScreen;

package/atoms/loader/ShimmerComponent/CollabShimmerCard.js

@@ -0,0 +1,56 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _templateObject = _taggedTemplateLiteral(['\n  display: flex;\n  height: 189px;\n  width: 222px;\n  flex-direction: column;\n'], ['\n  display: flex;\n  height: 189px;\n  width: 222px;\n  flex-direction: column;\n']),
+    _templateObject2 = _taggedTemplateLiteral(['\n  position: relative;\n  top: 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n  left: 10px;\n'], ['\n  position: relative;\n  top: 20px;\n  display: flex;\n  flex-direction: column;\n  gap: 5px;\n  left: 10px;\n']);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _styledComponents = require('styled-components');
+
+var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+var _Shimmer = require('./Shimmer');
+
+var _Shimmer2 = _interopRequireDefault(_Shimmer);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var MainContainer = _styledComponents2.default.div(_templateObject);
+
+var ShimmerDivContainer = _styledComponents2.default.div(_templateObject2);
+var CollabShimmerCard = function CollabShimmerCard() {
+  return _react2.default.createElement(
+    'div',
+    null,
+    _react2.default.createElement(
+      MainContainer,
+      null,
+      _react2.default.createElement('div', { style: { height: '124px', width: ' 100%', background: '#182738' } }),
+      _react2.default.createElement(
+        'div',
+        { style: { height: '65px', width: '100%', background: '#14202e' } },
+        _react2.default.createElement(
+          ShimmerDivContainer,
+          null,
+          _react2.default.createElement(_Shimmer2.default, { height: '12px', width: '56px' }),
+          _react2.default.createElement(
+            'div',
+            { style: { display: 'flex', flexDirection: 'row', gap: '5px' } },
+            _react2.default.createElement(_Shimmer2.default, { height: '10px', width: '27px' }),
+            _react2.default.createElement(_Shimmer2.default, { height: '10px', width: '44px' })
+          )
+        )
+      )
+    )
+  );
+};
+
+exports.default = CollabShimmerCard;

package/atoms/loader/ShimmerComponent/CollabShimmerCard.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import styled from 'styled-components';
+import Shimmer from './Shimmer';
+
+const MainContainer = styled.div`
+  display: flex;
+  height: 189px;
+  width: 222px;
+  flex-direction: column;
+`;
+
+const ShimmerDivContainer = styled.div`
+  position: relative;
+  top: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  left: 10px;
+`;
+const CollabShimmerCard = () => {
+  return (
+    <div>
+      <MainContainer>
+        <div style={{ height: '124px', width: ' 100%', background: '#182738' }}></div>
+        <div style={{ height: '65px', width: '100%', background: '#14202e' }}>
+          <ShimmerDivContainer>
+            <Shimmer height="12px" width="56px" />
+            <div style={{ display: 'flex', flexDirection: 'row', gap: '5px' }}>
+              <Shimmer height="10px" width="27px" />
+              <Shimmer height="10px" width="44px" />
+            </div>
+          </ShimmerDivContainer>
+        </div>
+      </MainContainer>
+    </div>
+  );
+};
+
+export default CollabShimmerCard;

package/atoms/loader/ShimmerComponent/CollabShimmerCardTray.js

@@ -0,0 +1,52 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _CollabShimmerCard = require('./CollabShimmerCard');
+
+var _CollabShimmerCard2 = _interopRequireDefault(_CollabShimmerCard);
+
+var _Shimmer = require('./Shimmer');
+
+var _Shimmer2 = _interopRequireDefault(_Shimmer);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var CollabShimmerCardTray = function CollabShimmerCardTray() {
+  var ShimmerCount = function ShimmerCount(_ref) {
+    var count = _ref.count;
+
+    var shimmerCards = Array.from({ length: count }, function (_, index) {
+      return _react2.default.createElement(_CollabShimmerCard2.default, { key: index });
+    });
+    return _react2.default.createElement(
+      _react2.default.Fragment,
+      null,
+      shimmerCards
+    );
+  };
+
+  return _react2.default.createElement(
+    'div',
+    { style: { padding: '20px' } },
+    _react2.default.createElement(
+      'div',
+      { style: { height: '20px', width: '100%', display: 'flex', gap: '5px', marginBottom: '10px' } },
+      _react2.default.createElement(_Shimmer2.default, { height: '18px', width: '79px' }),
+      _react2.default.createElement(_Shimmer2.default, { height: '18px', width: '25px' })
+    ),
+    _react2.default.createElement(
+      'div',
+      { style: { display: 'flex', flexDirection: 'row', gap: '15px' } },
+      _react2.default.createElement(ShimmerCount, { count: 6 })
+    )
+  );
+};
+
+exports.default = CollabShimmerCardTray;

package/atoms/loader/ShimmerComponent/CollabShimmerCardTray.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import CollabShimmerCard from './CollabShimmerCard';
+import Shimmer from './Shimmer';
+
+const CollabShimmerCardTray = () => {
+  const ShimmerCount = ({ count }) => {
+    const shimmerCards = Array.from({ length: count }, (_, index) => <CollabShimmerCard key={index} />);
+    return <React.Fragment>{shimmerCards}</React.Fragment>;
+  };
+
+  return (
+    <div style={{ padding: '20px' }}>
+      <div style={{ height: '20px', width: '100%', display: 'flex', gap: '5px', marginBottom: '10px' }}>
+        <Shimmer height="18px" width="79px" />
+        <Shimmer height="18px" width="25px" />
+      </div>
+      <div style={{ display: 'flex', flexDirection: 'row', gap: '15px' }}>
+        <ShimmerCount count={6} />
+      </div>
+    </div>
+  );
+};
+
+export default CollabShimmerCardTray;

package/atoms/loader/ShimmerComponent/FiltersShimmer.js

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _Shimmer = require('./Shimmer');
+
+var _Shimmer2 = _interopRequireDefault(_Shimmer);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var FiltersShimmer = function FiltersShimmer() {
+  return _react2.default.createElement(
+    _react2.default.Fragment,
+    null,
+    _react2.default.createElement(
+      'div',
+      { style: { display: 'flex', flexDirection: 'column', gap: '5px' } },
+      _react2.default.createElement(_Shimmer2.default, { height: '12px', width: '40px' }),
+      _react2.default.createElement(
+        'div',
+        { style: { display: 'flex', gap: '5px' } },
+        _react2.default.createElement(_Shimmer2.default, { height: '24px', width: '119.5px' }),
+        _react2.default.createElement(_Shimmer2.default, { height: '24px', width: '119.5px' }),
+        _react2.default.createElement(_Shimmer2.default, { height: '24px', width: '29.5px' })
+      )
+    )
+  );
+};
+
+exports.default = FiltersShimmer;

package/atoms/loader/ShimmerComponent/FiltersShimmer.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Shimmer from './Shimmer';
+
+const FiltersShimmer = () => {
+  return (
+    <React.Fragment>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '5px' }}>
+        <Shimmer height="12px" width="40px"></Shimmer>
+        <div style={{ display: 'flex', gap: '5px' }}>
+          <Shimmer height="24px" width="119.5px"></Shimmer>
+          <Shimmer height="24px" width="119.5px"></Shimmer>
+          <Shimmer height="24px" width="29.5px"></Shimmer>
+        </div>
+      </div>
+    </React.Fragment>
+  );
+};
+
+export default FiltersShimmer;

package/atoms/loader/ShimmerComponent/GraphDetailShimmer.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _templateObject = _taggedTemplateLiteral(['\n  height: 350px;\n  min-width: 295px;\n  border-radius: 4px;\n  background: #15212f;\n  box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.1);\n  -webkit-transition: all 0.4s ease;\n  transition: all 0.4s ease;\n  position: relative;\n  overflow: hidden;\n  border-bottom: 0px solid #07d5cd;\n  max-width: 25%;\n  width: 100%;\n  margin: 0px 10px;\n'], ['\n  height: 350px;\n  min-width: 295px;\n  border-radius: 4px;\n  background: #15212f;\n  box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.1);\n  -webkit-transition: all 0.4s ease;\n  transition: all 0.4s ease;\n  position: relative;\n  overflow: hidden;\n  border-bottom: 0px solid #07d5cd;\n  max-width: 25%;\n  width: 100%;\n  margin: 0px 10px;\n']);
+
+var _styledComponents = require('styled-components');
+
+var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _Shimmer = require('./Shimmer');
+
+var _Shimmer2 = _interopRequireDefault(_Shimmer);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var GraphDetailDiv = _styledComponents2.default.div(_templateObject);
+
+
+var GraphDetailsShimmer = function GraphDetailsShimmer() {
+  return _react2.default.createElement(
+    GraphDetailDiv,
+    null,
+    _react2.default.createElement(
+      'div',
+      { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: '30px' } },
+      _react2.default.createElement(_Shimmer2.default, { height: '20px', width: '80px' })
+    )
+  );
+};
+
+exports.default = GraphDetailsShimmer;

package/atoms/loader/ShimmerComponent/GraphDetailShimmer.jsx

@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+
+const GraphDetailDiv = styled.div`
+  height: 350px;
+  min-width: 295px;
+  border-radius: 4px;
+  background: #15212f;
+  box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.1);
+  -webkit-transition: all 0.4s ease;
+  transition: all 0.4s ease;
+  position: relative;
+  overflow: hidden;
+  border-bottom: 0px solid #07d5cd;
+  max-width: 25%;
+  width: 100%;
+  margin: 0px 10px;
+`;
+import React from 'react';
+import Shimmer from './Shimmer';
+
+const GraphDetailsShimmer = () => {
+  return (
+    <GraphDetailDiv>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: '30px' }}>
+        <Shimmer height="20px" width="80px" />
+      </div>
+    </GraphDetailDiv>
+  );
+};
+
+export default GraphDetailsShimmer;

package/atoms/loader/ShimmerComponent/GraphTitleShimmer.js

@@ -0,0 +1,40 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _Shimmer = require('./Shimmer');
+
+var _Shimmer2 = _interopRequireDefault(_Shimmer);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var GraphTitleShimmer = function GraphTitleShimmer() {
+  return _react2.default.createElement(
+    'div',
+    {
+      style: {
+        padding: '20px',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center'
+      } },
+    _react2.default.createElement(
+      'div',
+      { style: { width: '81.5px', height: '21px' } },
+      _react2.default.createElement(_Shimmer2.default, { height: '21px', width: '81.5' })
+    ),
+    _react2.default.createElement(
+      'div',
+      { style: { width: '71.8px', height: '18px' } },
+      _react2.default.createElement(_Shimmer2.default, { height: '18px', width: '71.8' })
+    )
+  );
+};
+
+exports.default = GraphTitleShimmer;

package/atoms/loader/ShimmerComponent/GraphTitleShimmer.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Shimmer from './Shimmer';
+
+const GraphTitleShimmer = () => {
+  return (
+    <div
+      style={{
+        padding: '20px',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center'
+      }}>
+      <div style={{ width: '81.5px', height: '21px' }}>
+        <Shimmer height="21px" width="81.5" />
+      </div>
+      <div style={{ width: '71.8px', height: '18px' }}>
+        <Shimmer height="18px" width="71.8" />
+      </div>
+    </div>
+  );
+};
+
+export default GraphTitleShimmer;

package/atoms/loader/ShimmerComponent/GraphsComponentShimmer.js

@@ -0,0 +1,44 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _GraphDetailShimmer = require('./GraphDetailShimmer');
+
+var _GraphDetailShimmer2 = _interopRequireDefault(_GraphDetailShimmer);
+
+var _GraphTitleShimmer = require('./GraphTitleShimmer');
+
+var _GraphTitleShimmer2 = _interopRequireDefault(_GraphTitleShimmer);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var GraphsComponentShimmer = function GraphsComponentShimmer() {
+  var val = window.location.href.split('/').pop() === 'hotstar' ? 1 : 4;
+  var components = [];
+
+  for (var i = 0; i < val; i++) {
+    components.push(_react2.default.createElement(_GraphDetailShimmer2.default, { key: i }));
+  }
+
+  return _react2.default.createElement(
+    'div',
+    { style: { display: 'flex', flexDirection: 'column' } },
+    _react2.default.createElement(_GraphTitleShimmer2.default, null),
+    _react2.default.createElement(
+      'div',
+      { style: { padding: '0 10px', display: 'flex', gap: '10px' } },
+      ' ',
+      components.map(function (component) {
+        return component;
+      })
+    )
+  );
+};
+
+exports.default = GraphsComponentShimmer;

package/atoms/loader/ShimmerComponent/GraphsComponentShimmer.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import GraphDetailsShimmer from './GraphDetailShimmer';
+import GraphTitleShimmer from './GraphTitleShimmer';
+
+const GraphsComponentShimmer = () => {
+  let val = window.location.href.split('/').pop() === 'hotstar' ? 1 : 4;
+  const components = [];
+
+  for (let i = 0; i < val; i++) {
+    components.push(<GraphDetailsShimmer key={i} />);
+  }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column' }}>
+      <GraphTitleShimmer />
+      <div style={{ padding: '0 10px', display: 'flex', gap: '10px' }}> {components.map((component) => component)}</div>
+    </div>
+  );
+};
+
+export default GraphsComponentShimmer;

package/atoms/loader/ShimmerComponent/Shimmer.js

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _templateObject = _taggedTemplateLiteral(['\n    0% {\n      transform: translateX(-100%);\n    }   \n    \n    100% {\n      transform: translateX(100%);\n    }\n'], ['\n    0% {\n      transform: translateX(-100%);\n    }   \n    \n    100% {\n      transform: translateX(100%);\n    }\n']),
+    _templateObject2 = _taggedTemplateLiteral(['\n  position: relative;\n  background-color: linear-gradient(\n    85deg,\n    rgba(48, 63, 81, 0.5) 0%,\n    rgba(48, 63, 81, 0.24) 50.76%,\n    rgba(48, 63, 81, 0.11) 68.68%,\n    rgba(48, 63, 81, 0) 100%\n  );\n  width: ', ';\n  height: ', ';\n  border-radius: 38px;\n  overflow: hidden;\n  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.11);\n  &::after {\n    display: block;\n    content: \'\';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    transform: translateX(-100%);\n    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);\n    animation: ', ' 1s infinite;\n  }\n'], ['\n  position: relative;\n  background-color: linear-gradient(\n    85deg,\n    rgba(48, 63, 81, 0.5) 0%,\n    rgba(48, 63, 81, 0.24) 50.76%,\n    rgba(48, 63, 81, 0.11) 68.68%,\n    rgba(48, 63, 81, 0) 100%\n  );\n  width: ', ';\n  height: ', ';\n  border-radius: 38px;\n  overflow: hidden;\n  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.11);\n  &::after {\n    display: block;\n    content: \'\';\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    transform: translateX(-100%);\n    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);\n    animation: ', ' 1s infinite;\n  }\n']);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _styledComponents = require('styled-components');
+
+var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var shimmerAnimation = (0, _styledComponents.keyframes)(_templateObject);
+
+var ShimmerContainer = _styledComponents2.default.div(_templateObject2, function (props) {
+  return props.width;
+}, function (props) {
+  return props.height;
+}, shimmerAnimation);
+
+var Shimmer = function Shimmer(_ref) {
+  var height = _ref.height,
+      width = _ref.width;
+
+  return _react2.default.createElement(
+    'div',
+    { style: { marginRight: '2px' } },
+    _react2.default.createElement(ShimmerContainer, { width: width, height: height }),
+    ' '
+  );
+};
+
+exports.default = Shimmer;