diff --git a/portal-ui/src/screens/Console/Common/IconsScreen.tsx b/portal-ui/src/screens/Console/Common/IconsScreen.tsx
index 47cd44629..d2cbb3eed 100644
--- a/portal-ui/src/screens/Console/Common/IconsScreen.tsx
+++ b/portal-ui/src/screens/Console/Common/IconsScreen.tsx
@@ -19,6 +19,7 @@ import { containerForHeader } from "../Common/FormComponents/common/styleLibrary
import { Theme } from "@mui/material/styles";
import createStyles from "@mui/styles/createStyles";
import withStyles from "@mui/styles/withStyles";
+import clsx from "clsx";
import {
FormControl,
FormControlLabel,
@@ -30,7 +31,8 @@ import {
import * as cicons from "../../../icons";
import * as micons from "../../../icons/SidebarMenus";
-import clsx from "clsx";
+import Loader from "./Loader/Loader";
+
interface IIconsScreenSimple {
classes: any;
@@ -42,6 +44,10 @@ const styles = (theme: Theme) =>
root: {
fontSize: 12,
wordWrap: "break-word",
+ "& .min-loader": {
+ width: 45,
+ height: 45,
+ }
},
def: {},
red: {
@@ -98,6 +104,21 @@ const IconsScreen = ({ classes }: IIconsScreenSimple) => {
OperatorLogo
+
Loaders
+
+
+
+
+ Loader
+
+
Icons
.
+
+import React, { SVGProps } from "react";
+
+import "./loader.styles.css";
+
+const Loader = (props: SVGProps) => {
+ return (
+
+ );
+};
+
+export default Loader;
diff --git a/portal-ui/src/screens/Console/Common/Loader/loader.styles.css b/portal-ui/src/screens/Console/Common/Loader/loader.styles.css
new file mode 100644
index 000000000..b0fdfac93
--- /dev/null
+++ b/portal-ui/src/screens/Console/Common/Loader/loader.styles.css
@@ -0,0 +1,300 @@
+#eB8dk2fHKWC2_tr {
+ animation: eB8dk2fHKWC2_tr__tr 3000ms linear infinite normal forwards
+}
+
+@keyframes eB8dk2fHKWC2_tr__tr {
+ 0% {
+ transform: translate(139.785027px, 140.086989px) rotate(45.236493deg);
+ animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1)
+ }
+ 10% {
+ transform: translate(139.785027px, 140.086989px) rotate(-197.740907deg);
+ animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1)
+ }
+ 20% {
+ transform: translate(139.785027px, 140.086989px) rotate(-108.6deg);
+ animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1)
+ }
+ 30% {
+ transform: translate(139.785027px, 140.086989px) rotate(-17.484014deg);
+ animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1)
+ }
+ 33.333333% {
+ transform: translate(139.785027px, 140.086989px) rotate(-17.48deg);
+ animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1)
+ }
+ 43.333333% {
+ transform: translate(139.785027px, 140.086989px) rotate(160.887995deg)
+ }
+ 100% {
+ transform: translate(139.785027px, 140.086989px) rotate(160.887995deg)
+ }
+}
+
+#eB8dk2fHKWC2_ts {
+ animation: eB8dk2fHKWC2_ts__ts 3000ms linear infinite normal forwards
+}
+
+@keyframes eB8dk2fHKWC2_ts__ts {
+ 0% {
+ transform: scale(1, 0.995019)
+ }
+ 33.333333% {
+ transform: scale(1, 0.995019);
+ animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1)
+ }
+ 43.333333% {
+ transform: scale(0.101121, 0.102033);
+ animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1)
+ }
+ 50% {
+ transform: scale(0.1, 0.1);
+ animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1)
+ }
+ 60% {
+ transform: scale(1, 1)
+ }
+ 100% {
+ transform: scale(1, 1)
+ }
+}
+
+#eB8dk2fHKWC2 {
+ animation: eB8dk2fHKWC2_c_o 3000ms linear infinite normal forwards
+}
+
+@keyframes eB8dk2fHKWC2_c_o {
+ 0% {
+ opacity: 1
+ }
+ 6.666667% {
+ opacity: 1
+ }
+ 10% {
+ opacity: 0
+ }
+ 13.333333% {
+ opacity: 0
+ }
+ 20% {
+ opacity: 1
+ }
+ 30% {
+ opacity: 1
+ }
+ 36.666667% {
+ opacity: 1
+ }
+ 40% {
+ opacity: 0
+ }
+ 100% {
+ opacity: 0
+ }
+}
+
+#eB8dk2fHKWC4 {
+ animation: eB8dk2fHKWC4__m 3000ms linear infinite normal forwards
+}
+
+@keyframes eB8dk2fHKWC4__m {
+ 0% {
+ d: path('M85.4,249.8C109.08,255.3,133.72,257.37,157.65,252.14C181.65,246.89,202.95,233.55,219.27,215.35C227.84,205.79,213.74,191.6,205.13,201.21C190.9,217.1,173.27,228.26,152.34,232.86C132.03,237.32,110.79,235.19,90.73,230.52C78.19,227.61,72.85,246.88,85.4,249.8C85.4,249.8,85.4,249.8,85.4,249.8Z')
+ }
+ 10% {
+ d: path('M85.4,249.8C85.4,249.8,85.399999,249.800001,85.399999,249.800001C85.399999,249.800001,85.4,249.800002,85.4,249.800002C85.4,249.800002,90.484102,251.966034,95.043213,248.269966C100.484052,243.859082,98.694728,236.722769,97.073675,234.469349C95.517658,232.306335,94.559418,231.751273,90.73,230.52C78.19,227.61,72.85,246.88,85.4,249.8C85.4,249.8,85.4,249.8,85.4,249.8Z')
+ }
+ 20% {
+ d: path('M85.4,249.8C85.4,249.8,85.399999,249.800001,85.399999,249.800001C85.399999,249.800001,85.4,249.800002,85.4,249.800002C85.4,249.800002,90.484102,251.966034,95.043213,248.269966C100.484052,243.859082,98.694728,236.722769,97.073675,234.469349C95.517658,232.306335,94.559418,231.751273,90.73,230.52C78.19,227.61,72.85,246.88,85.4,249.8C85.4,249.8,85.4,249.8,85.4,249.8Z')
+ }
+ 30% {
+ d: path('M85.4,249.8C109.08,255.3,133.72,257.37,157.65,252.14C181.65,246.89,202.95,233.55,219.27,215.35C227.84,205.79,213.74,191.6,205.13,201.21C190.9,217.1,173.27,228.26,152.34,232.86C132.03,237.32,110.79,235.19,90.73,230.52C78.19,227.61,72.85,246.88,85.4,249.8C85.4,249.8,85.4,249.8,85.4,249.8Z')
+ }
+ 33.333333% {
+ d: path('M85.4,249.8C109.08,255.3,133.72,257.37,157.65,252.14C181.65,246.89,202.95,233.55,219.27,215.35C227.84,205.79,213.74,191.6,205.13,201.21C190.9,217.1,173.27,228.26,152.34,232.86C132.03,237.32,110.79,235.19,90.73,230.52C78.19,227.61,72.85,246.88,85.4,249.8C85.4,249.8,85.4,249.8,85.4,249.8Z')
+ }
+ 43.333333% {
+ d: path('M84.281285,246.076032C107.50521,254.051555,133.72,257.37,157.65,252.14C181.65,246.89,202.95,233.55,219.27,215.35C227.84,205.79,213.74,191.6,205.13,201.21C190.9,217.1,173.27,228.26,152.34,232.86C132.03,237.32,86.465691,239.82846,53.85604,207.193233C41.31604,204.283233,32.439249,213.928672,40.474905,219.54755C40.474905,219.54755,61.310295,238.187372,84.281285,246.076032Z')
+ }
+ 100% {
+ d: path('M84.281285,246.076032C107.50521,254.051555,133.72,257.37,157.65,252.14C181.65,246.89,202.95,233.55,219.27,215.35C227.84,205.79,213.74,191.6,205.13,201.21C190.9,217.1,173.27,228.26,152.34,232.86C132.03,237.32,86.465691,239.82846,53.85604,207.193233C41.31604,204.283233,32.439249,213.928672,40.474905,219.54755C40.474905,219.54755,61.310295,238.187372,84.281285,246.076032Z')
+ }
+}
+
+#eB8dk2fHKWC6 {
+ animation: eB8dk2fHKWC6__m 3000ms linear infinite normal forwards
+}
+
+@keyframes eB8dk2fHKWC6__m {
+ 0% {
+ d: path('M249.74,169.63C255.24,145.95,257.31,121.31,252.08,97.38C246.83,73.38,233.49,52.08,215.29,35.76C205.73,27.19,191.54,41.29,201.15,49.9C217.04,64.13,228.2,81.76,232.8,102.69C237.26,123,235.13,144.24,230.46,164.3C227.54,176.84,246.82,182.18,249.74,169.63C249.74,169.63,249.74,169.63,249.74,169.63Z')
+ }
+ 10% {
+ d: path('M250.887564,168.08137C250.887564,168.081368,250.887563,168.081375,250.887563,168.081375C250.887563,168.081375,253.7831,157.676613,244.778825,154.781475C235.762034,151.882313,232.694053,158.881918,231.752888,162.486547C231.017121,165.304508,231.564293,168.517464,232.231509,169.666243C233.407087,171.690293,235.517449,173.828597,238.467701,174.606956C241.339242,175.364549,245.542656,175.427978,248.770823,172.704057C248.770823,172.704057,250.400569,171.202441,250.887564,168.08137Z')
+ }
+ 20% {
+ d: path('M250.887564,168.08137C250.887564,168.081368,250.887563,168.081375,250.887563,168.081375C250.887563,168.081375,253.7831,157.676613,244.778825,154.781475C235.762034,151.882313,232.694053,158.881918,231.752888,162.486547C231.017121,165.304508,231.564293,168.517464,232.231509,169.666243C233.407087,171.690293,235.517449,173.828597,238.467701,174.606956C241.339242,175.364549,245.542656,175.427978,248.770823,172.704057C248.770823,172.704057,250.400569,171.202441,250.887564,168.08137Z')
+ }
+ 30% {
+ d: path('M249.74,169.63C255.24,145.95,257.31,121.31,252.08,97.38C246.83,73.38,233.49,52.08,215.29,35.76C205.73,27.19,191.54,41.29,201.15,49.9C217.04,64.13,228.2,81.76,232.8,102.69C237.26,123,235.13,144.24,230.46,164.3C227.54,176.84,246.82,182.18,249.74,169.63C249.74,169.63,249.74,169.63,249.74,169.63Z')
+ }
+ 33.333333% {
+ d: path('M249.74,169.63C255.24,145.95,257.31,121.31,252.08,97.38C246.83,73.38,233.49,52.08,215.29,35.76C205.73,27.19,191.54,41.29,201.15,49.9C217.04,64.13,228.2,81.76,232.8,102.69C237.26,123,235.13,144.24,230.46,164.3C227.54,176.84,246.82,182.18,249.74,169.63C249.74,169.63,249.74,169.63,249.74,169.63Z')
+ }
+ 43.333333% {
+ d: path('M241.985702,180.287452C255.201364,145.393106,257.31,121.31,252.08,97.38C246.83,73.38,233.49,52.08,215.29,35.76C205.73,27.19,189.760952,38.146938,199.370952,46.756938C229.706596,66.855753,234.126292,101.544407,234.194759,127.574104C235.798839,155.047874,216.192342,185.901625,205.13,201.21C199.980012,208.336696,214.039151,220.128533,219.270001,215.35C219.270001,215.35,237.299554,192.660656,241.985702,180.287452Z')
+ }
+ 100% {
+ d: path('M241.985702,180.287452C255.201364,145.393106,257.31,121.31,252.08,97.38C246.83,73.38,233.49,52.08,215.29,35.76C205.73,27.19,189.760952,38.146938,199.370952,46.756938C229.706596,66.855753,234.126292,101.544407,234.194759,127.574104C235.798839,155.047874,216.192342,185.901625,205.13,201.21C199.980012,208.336696,214.039151,220.128533,219.270001,215.35C219.270001,215.35,237.299554,192.660656,241.985702,180.287452Z')
+ }
+}
+
+#eB8dk2fHKWC8 {
+ animation: eB8dk2fHKWC8__m 3000ms linear infinite normal forwards
+}
+
+@keyframes eB8dk2fHKWC8__m {
+ 0% {
+ d: path('M171.68,7.71C148.17,1.51,123.61,-1.28,99.53,3.25C75.39,7.79,53.7,20.49,36.85,38.21C28.01,47.52,41.68,62.11,50.57,52.76C65.27,37.3,83.22,26.66,104.27,22.68C124.7,18.82,145.87,21.58,165.79,26.83C178.22,30.11,184.14,11,171.68,7.71C171.68,7.71,171.68,7.71,171.68,7.71Z')
+ }
+ 10% {
+ d: path('M171.58686,7.8192C164.834536,7.661923,162.882928,13.414575,162.613915,14.669774C162.613914,14.669774,161.858025,17.37084,162.366976,18.743708C162.782522,19.864622,163.527502,21.022768,164.723558,21.957074C165.842173,22.830886,168.859974,24.254302,168.859974,24.254302C168.859974,24.254302,168.859968,24.254306,168.859967,24.254304C181.289967,27.534304,184.046866,11.109212,171.586866,7.819212C171.586866,7.819212,171.58686,7.8192,171.58686,7.8192Z')
+ }
+ 20% {
+ d: path('M171.58686,7.8192C164.834536,7.661923,162.882928,13.414575,162.613915,14.669774C162.613914,14.669774,161.858025,17.37084,162.366976,18.743708C162.782522,19.864622,163.527502,21.022768,164.723558,21.957074C165.842173,22.830886,168.859974,24.254302,168.859974,24.254302C168.859974,24.254302,168.859968,24.254306,168.859967,24.254304C181.289967,27.534304,184.046866,11.109212,171.586866,7.819212C171.586866,7.819212,171.58686,7.8192,171.58686,7.8192Z')
+ }
+ 30% {
+ d: path('M171.68,7.71C148.17,1.51,123.61,-1.28,99.53,3.25C75.39,7.79,53.7,20.49,36.85,38.21C28.01,47.52,41.68,62.11,50.57,52.76C65.27,37.3,83.22,26.66,104.27,22.68C124.7,18.82,145.87,21.58,165.79,26.83C178.22,30.11,184.14,11,171.68,7.71C171.68,7.71,171.68,7.71,171.68,7.71Z')
+ }
+ 33.333333% {
+ d: path('M171.68,7.71C148.17,1.51,123.61,-1.28,99.53,3.25C75.39,7.79,53.7,20.49,36.85,38.21C28.01,47.52,41.68,62.11,50.57,52.76C65.27,37.3,83.22,26.66,104.27,22.68C124.7,18.82,145.87,21.58,165.79,26.83C178.22,30.11,184.14,11,171.68,7.71C171.68,7.71,171.68,7.71,171.68,7.71Z')
+ }
+ 43.333333% {
+ d: path('M154.601291,1.547478C127.732134,-3.659063,101.676041,0.16217,89.834975,4.047622C73.018778,9.565582,43.015709,29.967817,36.85,38.21C28.01,47.52,41.568561,62.002759,50.57,52.76C67.005248,35.884138,77.788003,22.937369,100.935291,18.024709C148.028227,8.029949,175.904245,24.591662,199.370952,46.756938C210.775532,51.88401,219.463487,39.878796,215.289997,35.759998C189.664787,10.470596,154.601291,1.547478,154.601291,1.547478Z')
+ }
+ 100% {
+ d: path('M154.601291,1.547478C127.732134,-3.659063,101.676041,0.16217,89.834975,4.047622C73.018778,9.565582,43.015709,29.967817,36.85,38.21C28.01,47.52,41.568561,62.002759,50.57,52.76C67.005248,35.884138,77.788003,22.937369,100.935291,18.024709C148.028227,8.029949,175.904245,24.591662,199.370952,46.756938C210.775532,51.88401,219.463487,39.878796,215.289997,35.759998C189.664787,10.470596,154.601291,1.547478,154.601291,1.547478Z')
+ }
+}
+
+#eB8dk2fHKWC10 {
+ animation: eB8dk2fHKWC10__m 3000ms linear infinite normal forwards
+}
+
+@keyframes eB8dk2fHKWC10__m {
+ 0% {
+ d: path('M5.83,85.46C0.33,109.14,-1.74,133.78,3.49,157.71C8.74,181.71,22.08,203.01,40.28,219.33C49.84,227.9,64.03,213.8,54.42,205.19C38.53,190.96,27.37,173.33,22.77,152.4C18.31,132.09,20.44,110.85,25.11,90.79C28.03,78.25,8.75,72.91,5.83,85.46L5.83,85.46Z')
+ }
+ 3.333333% {
+ d: path('M4.90273,88.748028C1.236063,104.534694,0.694614,122.375568,4.181281,138.328902C7.119767,155.82704,18.329955,178.442148,31.722495,188.944182C39.448991,194.869945,48.960631,181.919808,35.808325,167.974185C27.053341,155.46954,26.778713,144.786038,23.180834,130.168643C19.139468,114.899686,18.114526,100.786543,20.952073,87.411869C21.572437,79.045425,6.897064,77.595457,4.916661,86.915441L4.90273,88.748028Z')
+ }
+ 10% {
+ d: path('M3.04819,95.324083C3.04819,95.324083,5.563842,99.566705,5.563842,99.566705C5.563842,99.566705,11.253926,104.287825,15.031546,103.153927C19.091035,103.791214,24.274539,98.764542,25.851733,95.404259C27.275674,92.370488,25.596139,87.698114,24.002501,85.705929C20.798403,80.519057,13.463578,80.659628,12.636219,80.655608C8.65731,80.636275,3.191193,86.96637,3.089982,89.826322L3.04819,95.324083Z')
+ }
+ 20% {
+ d: path('M3.04819,95.324083C3.04819,95.324083,5.563842,99.566705,5.563842,99.566705C5.563842,99.566705,11.253926,104.287825,15.031546,103.153927C19.091035,103.791214,24.274539,98.764542,25.851733,95.404259C27.275674,92.370488,25.596139,87.698114,24.002501,85.705929C20.798403,80.519057,13.463578,80.659628,12.636219,80.655608C8.65731,80.636275,3.191193,86.96637,3.089982,89.826322L3.04819,95.324083Z')
+ }
+ 30% {
+ d: path('M5.83,85.46C0.33,109.14,-1.74,133.78,3.49,157.71C8.74,181.71,22.08,203.01,40.28,219.33C49.84,227.9,64.03,213.8,54.42,205.19C38.53,190.96,27.37,173.33,22.77,152.4C18.31,132.09,20.44,110.85,25.11,90.79C28.03,78.25,8.75,72.91,5.83,85.46L5.83,85.46Z')
+ }
+ 33.333333% {
+ d: path('M5.83,85.46C0.33,109.14,-1.74,133.78,3.49,157.71C8.74,181.71,22.08,203.01,40.28,219.33C49.84,227.9,64.03,213.8,54.42,205.19C38.53,190.96,27.37,173.33,22.77,152.4C18.31,132.09,20.44,110.85,25.11,90.79C28.03,78.25,8.75,72.91,5.83,85.46L5.83,85.46Z')
+ }
+ 43.333333% {
+ d: path('M36.436007,38.11681C-7.498754,85.801617,-0.826469,134.911183,5.658972,158.164678C15.873566,192.855226,35.43893,215.965329,40.28,219.33C49.84,227.9,63.271136,215.585685,53.661136,206.975685C38.384036,191.128398,25.999041,166.121323,22.77,152.4C12.429986,121.009925,27.020185,73.061168,50.245766,52.61587C65.058304,39.576508,51.054205,23.186387,36.436019,38.116819L36.436007,38.11681Z')
+ }
+ 100% {
+ d: path('M36.436007,38.11681C-7.498754,85.801617,-0.826469,134.911183,5.658972,158.164678C15.873566,192.855226,35.43893,215.965329,40.28,219.33C49.84,227.9,63.271136,215.585685,53.661136,206.975685C38.384036,191.128398,25.999041,166.121323,22.77,152.4C12.429986,121.009925,27.020185,73.061168,50.245766,52.61587C65.058304,39.576508,51.054205,23.186387,36.436019,38.116819L36.436007,38.11681Z')
+ }
+}
+
+#eB8dk2fHKWC11_ts {
+ animation: eB8dk2fHKWC11_ts__ts 3000ms linear infinite normal forwards
+}
+
+@keyframes eB8dk2fHKWC11_ts__ts {
+ 0% {
+ transform: translate(139.784999px, 140.086986px) scale(1, 1)
+ }
+ 30% {
+ transform: translate(139.784999px, 140.086986px) scale(1, 1)
+ }
+ 43.333333% {
+ transform: translate(139.784999px, 140.086986px) scale(0.102813, 0.102813)
+ }
+ 50% {
+ transform: translate(139.784999px, 140.086986px) scale(0.102813, 0.102813)
+ }
+ 60% {
+ transform: translate(139.784999px, 140.086986px) scale(1.001075, 1.001075)
+ }
+ 100% {
+ transform: translate(139.784999px, 140.086986px) scale(1.001075, 1.001075)
+ }
+}
+
+#eB8dk2fHKWC11 {
+ animation: eB8dk2fHKWC11_c_o 3000ms linear infinite normal forwards
+}
+
+@keyframes eB8dk2fHKWC11_c_o {
+ 0% {
+ opacity: 0
+ }
+ 30% {
+ opacity: 0
+ }
+ 36.666667% {
+ opacity: 0
+ }
+ 40% {
+ opacity: 1
+ }
+ 100% {
+ opacity: 1
+ }
+}
+
+#eB8dk2fHKWC13_tr {
+ animation: eB8dk2fHKWC13_tr__tr 3000ms linear infinite normal forwards
+}
+
+@keyframes eB8dk2fHKWC13_tr__tr {
+ 0% {
+ transform: translate(139.785004px, 140.086979px) rotate(0deg)
+ }
+ 10% {
+ transform: translate(139.785004px, 140.086979px) rotate(0deg)
+ }
+ 20% {
+ transform: translate(139.785004px, 140.086979px) rotate(90.041277deg)
+ }
+ 100% {
+ transform: translate(139.785004px, 140.086979px) rotate(90.041277deg)
+ }
+}
+
+#eB8dk2fHKWC13 {
+ animation: eB8dk2fHKWC13_c_o 3000ms linear infinite normal forwards
+}
+
+@keyframes eB8dk2fHKWC13_c_o {
+ 0% {
+ opacity: 0
+ }
+ 6.666667% {
+ opacity: 0
+ }
+ 10% {
+ opacity: 1
+ }
+ 13.333333% {
+ opacity: 1
+ }
+ 20% {
+ opacity: 0
+ }
+ 100% {
+ opacity: 0
+ }
+}
\ No newline at end of file