From 7459b7f1a44aa4e5f8c3d8e5bfc77384edd19879 Mon Sep 17 00:00:00 2001 From: Nalvazhuthi Date: Tue, 6 May 2025 18:41:58 +0530 Subject: [PATCH] feat: Implement loading skeletons in various components - Added SkeletonUI component to display loading states in Assets, MarketPlace, ROISummary, ThroughputSummary, and other relevant components. - Integrated loading state management in Assets and MarketPlace to show skeletons while fetching data. - Updated styles for skeletons to enhance visual representation during loading. - Refactored existing components to utilize the new SkeletonUI for better user experience during data loading. - Adjusted sidebar animations for smoother transitions. --- .../components/layout/sidebarLeft/Assets.tsx | 15 +- .../layout/sidebarLeft/SideBarLeft.tsx | 6 +- .../layout/sidebarRight/SideBarRight.tsx | 2 +- app/src/components/templates/SkeletonUI.tsx | 79 ++++- .../ui/analysis/ProductionCapacity.tsx | 6 +- app/src/components/ui/analysis/ROISummary.tsx | 274 ++++++++++-------- .../ui/analysis/ThroughputSummary.tsx | 69 +++-- app/src/components/ui/log/LoggerContext.tsx | 15 +- app/src/modules/market/FilterSearch.tsx | 50 ++-- app/src/modules/market/MarketPlace.tsx | 26 +- .../widgets/2d/DraggableWidget.tsx | 27 +- app/src/pages/Project.tsx | 6 +- .../components/marketPlace/marketPlace.scss | 74 +++++ app/src/styles/components/menu/menu.scss | 4 +- .../components/simulation/analysis.scss | 18 ++ .../visualization/floating/common.scss | 3 +- app/src/styles/layout/sidebar.scss | 34 ++- app/src/styles/layout/skeleton.scss | 2 +- 18 files changed, 477 insertions(+), 233 deletions(-) diff --git a/app/src/components/layout/sidebarLeft/Assets.tsx b/app/src/components/layout/sidebarLeft/Assets.tsx index 7288bb5..00d245d 100644 --- a/app/src/components/layout/sidebarLeft/Assets.tsx +++ b/app/src/components/layout/sidebarLeft/Assets.tsx @@ -13,6 +13,7 @@ import workStation from "../../../assets/image/categories/workStation.png"; import machines from "../../../assets/image/categories/machines.png"; import feneration from "../../../assets/image/categories/feneration.png"; import worker from "../../../assets/image/categories/worker.png"; +import SkeletonUI from "../../templates/SkeletonUI"; // ------------------------------------- interface AssetProp { @@ -41,6 +42,7 @@ const Assets: React.FC = () => { const [categoryAssets, setCategoryAssets] = useState([]); const [filtereredAssets, setFiltereredAssets] = useState([]); const [categoryList, setCategoryList] = useState([]); + const [isLoading, setisLoading] = useState(false); // Loading state for assets const handleSearchChange = (value: string) => { const searchTerm = value.toLowerCase(); @@ -68,6 +70,7 @@ const Assets: React.FC = () => { setCategoryAssets(filteredModels); }; + useEffect(() => { const filteredAssets = async () => { try { @@ -104,7 +107,9 @@ const Assets: React.FC = () => { { category: "Workers", categoryImage: worker }, ]); }, []); + const fetchCategoryAssets = async (asset: any) => { + setisLoading(true); setSelectedCategory(asset); if (asset === "Feneration") { const localAssets: AssetProp[] = [ @@ -130,12 +135,16 @@ const Assets: React.FC = () => { ]; setCategoryAssets(localAssets); setFiltereredAssets(localAssets); + setisLoading(false); } else { try { const res = await getCategoryAsset(asset); setCategoryAssets(res); setFiltereredAssets(res); - } catch (error) {} + setisLoading(false); // End loading + } catch (error) { + setisLoading(false); + } } }; return ( @@ -143,7 +152,9 @@ const Assets: React.FC = () => {
- {searchValue ? ( + {isLoading ? ( + // Show skeleton when loading + ) : searchValue ? (
diff --git a/app/src/components/layout/sidebarLeft/SideBarLeft.tsx b/app/src/components/layout/sidebarLeft/SideBarLeft.tsx index e0b56d4..0765b95 100644 --- a/app/src/components/layout/sidebarLeft/SideBarLeft.tsx +++ b/app/src/components/layout/sidebarLeft/SideBarLeft.tsx @@ -31,10 +31,10 @@ const SideBarLeft: React.FC = () => { }; return ( -
+
{toggleUI && ( -
+
{activeModule === "visualization" ? ( <> { }; export default SideBarLeft; + +// sidebar-left-container opemn close sidebar-left-container smoothly diff --git a/app/src/components/layout/sidebarRight/SideBarRight.tsx b/app/src/components/layout/sidebarRight/SideBarRight.tsx index b2f25eb..97a29d9 100644 --- a/app/src/components/layout/sidebarRight/SideBarRight.tsx +++ b/app/src/components/layout/sidebarRight/SideBarRight.tsx @@ -55,7 +55,7 @@ const SideBarRight: React.FC = () => { }, [activeModule, selectedEventData, selectedEventSphere, setSubModule]); return ( -
+
{toggleUI && (
diff --git a/app/src/components/templates/SkeletonUI.tsx b/app/src/components/templates/SkeletonUI.tsx index 30716b4..e2d48f1 100644 --- a/app/src/components/templates/SkeletonUI.tsx +++ b/app/src/components/templates/SkeletonUI.tsx @@ -1,21 +1,70 @@ import React from "react"; +// Define the prop types +interface SkeletonUIProps { + type: "asset" | "assetLibrary" | "assetWidget" | "default"; // You can expand this with other types as needed +} -const SkeletonUI = () => { - return ( -
-
-
-
-
+// Define the SkeletonUI component +const SkeletonUI: React.FC = ({ type }) => { + console.log("type: ", type); -
-
-
-
- -
- ); + // Function to render skeleton content based on 'type' + const renderSkeleton = () => { + switch (type) { + case "assetLibrary": + return ( + <> + {Array(5) + .fill(null) // Create an array of 5 empty items + .map((_, index) => ( +
+
+
+
+
+
+
+ ))} + + ); + + case "assetWidget": + return ( +
+
+
+
+ ); + case "asset": + return ( + <> +
+
+
+
+
+
+
+
+ + ); + + default: + return ( +
+
+
+
+
+
+
+
+ ); + } + }; + + return
{renderSkeleton()}
; }; -export default SkeletonUI; \ No newline at end of file +export default SkeletonUI; diff --git a/app/src/components/ui/analysis/ProductionCapacity.tsx b/app/src/components/ui/analysis/ProductionCapacity.tsx index bf86603..d6ebc58 100644 --- a/app/src/components/ui/analysis/ProductionCapacity.tsx +++ b/app/src/components/ui/analysis/ProductionCapacity.tsx @@ -73,7 +73,7 @@ const ThroughputSummary = () => { }, }; - const isLoading = true; + const isLoading = false; return (
@@ -90,7 +90,7 @@ const ThroughputSummary = () => {
- {isLoading ? ( + {!isLoading ? ( <>
@@ -157,7 +157,7 @@ const ThroughputSummary = () => {
) : ( - + )}
diff --git a/app/src/components/ui/analysis/ROISummary.tsx b/app/src/components/ui/analysis/ROISummary.tsx index 81441a2..3923fbd 100644 --- a/app/src/components/ui/analysis/ROISummary.tsx +++ b/app/src/components/ui/analysis/ROISummary.tsx @@ -8,56 +8,58 @@ import { } from "../../icons/analysis"; import SemiCircleProgress from "./SemiCircleProgress"; import { ArrowIcon } from "../../icons/ExportCommonIcons"; +import SkeletonUI from "../../templates/SkeletonUI"; const ROISummary = ({ roiSummaryData = { productName: "Product name", roiPercentage: 133, paybackPeriod: 50.3, - totalCost: "₹ 1,20,000", - revenueGenerated: "₹ 2,80,000", - netProfit: "₹ 1,60,000", + totalCost: "1,20,000", + revenueGenerated: "2,80,000", + netProfit: "1,60,000", + netLoss: null, costBreakdown: [ { item: "Raw Material A", - unitCost: "₹ 10/unit", - laborCost: "₹ 0", - totalCost: "₹ 1000", - sellingPrice: "₹ 1500", + unitCost: "10/unit", + laborCost: "0", + totalCost: "1000", + sellingPrice: "1500", }, { item: "Labor", - unitCost: "₹ 10/unit", - laborCost: "₹ 500", - totalCost: "₹ 500", + unitCost: "10/unit", + laborCost: "500", + totalCost: "500", sellingPrice: "N/A", }, { item: "Product 1", - unitCost: "₹ 10/unit", - laborCost: "₹ 200", - totalCost: "₹ 200", - sellingPrice: "₹ 2000", + unitCost: "10/unit", + laborCost: "200", + totalCost: "200", + sellingPrice: "2000", }, { item: "Machine", unitCost: "-", laborCost: "-", - totalCost: "₹ 20,000", + totalCost: "20,000", sellingPrice: "N/A", }, { item: "Total", unitCost: "-", laborCost: "-", - totalCost: "₹ 1,20,000", + totalCost: "1,20,000", sellingPrice: "-", }, { item: "Net Profit", unitCost: "-", laborCost: "-", - totalCost: "₹ 1,60,000", + totalCost: "1,60,000", sellingPrice: "-", }, ], @@ -70,6 +72,7 @@ const ROISummary = ({ setIsTableOpen(!isTableOpen); }; + const isLoading = false; return (
@@ -82,121 +85,140 @@ const ROISummary = ({
-
- -
Product :
-
{roiSummaryData.productName}
-
-
- -
-
- +{roiSummaryData.roiPercentage}% ROI with payback in - just {roiSummaryData.paybackPeriod} months -
-
-
-
- -
- you're on track to hit it by -
July 2029
+ {!isLoading ? ( + <> +
+ +
Product :
+
{roiSummaryData.productName}
-
-
-
-
- Total Cost Incurred - {roiSummaryData.totalCost} +
+ +
+
+ +{roiSummaryData.roiPercentage}% ROI with payback + in just {roiSummaryData.paybackPeriod} months
-
- Revenue Generated - - {roiSummaryData.revenueGenerated} +
+
+
+ +
+ you're on track to hit it by +
July 2029
+
+
+
+
+
+ Total Cost Incurred + + ₹ + {roiSummaryData.totalCost} + +
+
+ Revenue Generated + + ₹ + + {roiSummaryData.revenueGenerated} + +
+
+
+
+ ↑ + Net Profit +
+
+ ₹ + {roiSummaryData.netProfit} +
+
+
+
+
+
+
+ + Cost Breakdown +
+ + +
+
+ + + + + + + + + + + + {roiSummaryData.costBreakdown.map((row, index) => ( + + + + + + + + ))} + +
ItemUnit CostLabor CostTotal CostSelling Price
{row.item}{row.unitCost}{row.laborCost}{row.totalCost}{row.sellingPrice}
+
-
- - ↑ Net Profit - - {roiSummaryData.netProfit} +
+
+ + + + How to improve ROI? +
+
+ Increase CNC utilization by{" "} + 10% to shave{" "} + 0.5 months of payback period +
+
+
+
+
+
-
-
-
-
-
- - Cost Breakdown -
- - - - -
-
- - - - - - - - - - - - {roiSummaryData.costBreakdown.map((row, index) => ( - - - - - - - - ))} - -
ItemUnit CostLabor CostTotal CostSelling Price
{row.item}{row.unitCost}{row.laborCost}{row.totalCost}{row.sellingPrice}
-
-
-
-
- - - - How to improve ROI? -
-
- Increase CNC utilization by 10%{" "} - to shave 0.5 months of payback - period -
-
-
-
-
- -
+ + ) : ( + + )}
); diff --git a/app/src/components/ui/analysis/ThroughputSummary.tsx b/app/src/components/ui/analysis/ThroughputSummary.tsx index 5ce5da8..6a0ad98 100644 --- a/app/src/components/ui/analysis/ThroughputSummary.tsx +++ b/app/src/components/ui/analysis/ThroughputSummary.tsx @@ -2,6 +2,7 @@ import { ProductionCapacityIcon, ThroughputSummaryIcon, } from "../../icons/analysis"; +import SkeletonUI from "../../templates/SkeletonUI"; const ProductionCapacity = ({ progressPercent = 50, @@ -15,6 +16,7 @@ const ProductionCapacity = ({ const partialFillPercent = ((progressPercent / 100) * totalBars - barsToFill) * 100; + const isLoading = false; return (
@@ -29,39 +31,44 @@ const ProductionCapacity = ({
- -
-
- {throughputValue} Units/hour -
- - {/* Dynamic Progress Bar */} -
- {[...Array(totalBars)].map((_, i) => ( -
- {i < barsToFill ? ( -
- ) : i === barsToFill ? ( -
- ) : null} + {isLoading ? ( + <> +
+
+ {throughputValue} Units/hour
- ))} -
-
-
-
- Avg. Process Time - {avgProcessTime} -
-
- Machine Utilization - {machineUtilization} -
-
+ {/* Dynamic Progress Bar */} +
+ {[...Array(totalBars)].map((_, i) => ( +
+ {i < barsToFill ? ( +
+ ) : i === barsToFill ? ( +
+ ) : null} +
+ ))} +
+
+ +
+
+ Avg. Process Time + {avgProcessTime} +
+
+ Machine Utilization + {machineUtilization} +
+
+ + ) : ( + + )}
); diff --git a/app/src/components/ui/log/LoggerContext.tsx b/app/src/components/ui/log/LoggerContext.tsx index 6e63a55..69a84c1 100644 --- a/app/src/components/ui/log/LoggerContext.tsx +++ b/app/src/components/ui/log/LoggerContext.tsx @@ -1,4 +1,5 @@ -import React, { createContext, useContext, useState, useCallback, useMemo } from "react"; +// LoggerProvider.tsx +import React, { createContext, useContext, useState, useCallback, useMemo, useEffect } from "react"; import { MathUtils } from "three"; export type LogType = "log" | "info" | "warning" | "error" | "success"; @@ -60,6 +61,18 @@ export const LoggerProvider: React.FC<{ children: React.ReactNode }> = ({ [logs, setLogs, isLogListVisible, setIsLogListVisible, addLog] ); + // Attach logger globally to window object + useEffect(() => { + (window as any).echo = { + log: loggerMethods.log, + info: loggerMethods.info, + warn: loggerMethods.warn, + error: loggerMethods.error, + success: loggerMethods.success, + clear: loggerMethods.clear, + }; + }, [loggerMethods]); + return ( {children} diff --git a/app/src/modules/market/FilterSearch.tsx b/app/src/modules/market/FilterSearch.tsx index de518c8..20882c9 100644 --- a/app/src/modules/market/FilterSearch.tsx +++ b/app/src/modules/market/FilterSearch.tsx @@ -1,10 +1,8 @@ import React, { useEffect, useState } from "react"; -// import RegularDropDown from "./ui/inputs/RegularDropDown"; - import Search from "../../components/ui/inputs/Search"; import { StarsIcon } from "../../components/icons/marketPlaceIcons"; import RegularDropDown from "../../components/ui/inputs/RegularDropDown"; -import { getSortedAssets } from "../../services/marketplace/getSortedAssets"; + interface ModelData { CreatedBy: string; animated: string | null; @@ -19,47 +17,46 @@ interface ModelData { _id: string; price: number; } + interface ModelsProps { models: ModelData[]; setModels: React.Dispatch>; filteredModels: ModelData[]; } + const FilterSearch: React.FC = ({ models, setModels, filteredModels, }) => { - const [activeOption, setActiveOption] = useState("Sort by"); // State for active option + const [activeOption, setActiveOption] = useState("Sort by"); + const [rating, setRating] = useState(0); const handleSelect = (option: string) => { setActiveOption(option); - - // Alphabet ascending - // Alphabet descending - // All }; + useEffect(() => { - if (activeOption == "Alphabet ascending") { - let ascending = models - ?.slice() - .sort((a, b) => a.filename.localeCompare(b.filename)) - .map((val) => val); + if (activeOption === "Alphabet ascending") { + const ascending = [...models].sort((a, b) => a.filename.localeCompare(b.filename)); setModels(ascending); - } else if (activeOption == "Alphabet descending") { - let descending = models - ?.slice() - .sort((a, b) => b.filename.localeCompare(a.filename)) - .map((val) => val); + } else if (activeOption === "Alphabet descending") { + const descending = [...models].sort((a, b) => b.filename.localeCompare(a.filename)); setModels(descending); } }, [activeOption]); + const handleSearch = (val: string) => { - const filteredModel = filteredModels?.filter((model) => + const filteredModel = filteredModels.filter((model) => model.filename.toLowerCase().includes(val.toLowerCase()) ); setModels(filteredModel); }; + const handleStarClick = (index: number) => { + setRating(index + 1); + }; + return (
@@ -71,14 +68,19 @@ const FilterSearch: React.FC = ({ />
Free
Animated
+
Rating
- - - - - + {[0, 1, 2, 3, 4].map((i) => ( +
handleStarClick(i)} + className={`star-wrapper ${i < rating ? "filled" : "empty"}`} + > + +
+ ))}
diff --git a/app/src/modules/market/MarketPlace.tsx b/app/src/modules/market/MarketPlace.tsx index dfcf62e..4b76951 100644 --- a/app/src/modules/market/MarketPlace.tsx +++ b/app/src/modules/market/MarketPlace.tsx @@ -3,6 +3,7 @@ import FilterSearch from "./FilterSearch"; import CardsContainer from "./CardsContainer"; import { fetchAssets } from "../../services/marketplace/fetchAssets"; import { getAssetImages } from "../../services/factoryBuilder/assest/assets/getAssetImages"; +import SkeletonUI from "../../components/templates/SkeletonUI"; interface ModelData { CreatedBy: string; animated: string | null; @@ -20,14 +21,19 @@ interface ModelData { const MarketPlace = () => { const [models, setModels] = useState([]); const [filteredModels, setFilteredModels] = useState([]); + const [isLoading, setisLoading] = useState(false); // Loading state useEffect(() => { const filteredAssets = async () => { + setisLoading(true); try { const filt = await getAssetImages("67d934ad0f42a1fdadb19aa6"); setModels(filt.items); setFilteredModels(filt.items); - } catch {} + setisLoading(false); + } catch { + setisLoading(false); + } }; filteredAssets(); }, []); @@ -36,12 +42,18 @@ const MarketPlace = () => {
- - + {isLoading ? ( + // Show loading spinner while fetching + ) : ( + <> + + + + )}{" "}
diff --git a/app/src/modules/visualization/widgets/2d/DraggableWidget.tsx b/app/src/modules/visualization/widgets/2d/DraggableWidget.tsx index 0c8fe6f..3f22fee 100644 --- a/app/src/modules/visualization/widgets/2d/DraggableWidget.tsx +++ b/app/src/modules/visualization/widgets/2d/DraggableWidget.tsx @@ -99,7 +99,7 @@ export const DraggableWidget = ({ const deleteSelectedChart = async () => { try { console.log("delete"); - + const email = localStorage.getItem("email") || ""; const organization = email?.split("@")[1]?.split(".")[0]; let deleteWidget = { @@ -109,9 +109,9 @@ export const DraggableWidget = ({ }; if (visualizationSocket) { - setSelectedChartId(null) + setSelectedChartId(null); visualizationSocket.emit("v2:viz-widget:delete", deleteWidget); - console.log("delete widget",selectedChartId); + console.log("delete widget", selectedChartId); } const updatedWidgets = selectedZone.widgets.filter( (w: Widget) => w.id !== widget.id @@ -176,7 +176,7 @@ export const DraggableWidget = ({ const duplicatedWidget: Widget = { ...widget, - title: name === '' ? widget.title : name, + title: name === "" ? widget.title : name, Data: { duration: duration, measurements: { ...measurements }, @@ -189,7 +189,7 @@ export const DraggableWidget = ({ zoneId: selectedZone.zoneId, widget: duplicatedWidget, }; - + if (visualizationSocket) { visualizationSocket.emit("v2:viz-widget:add", duplicateWidget); } @@ -309,9 +309,9 @@ export const DraggableWidget = ({ : undefined, }} ref={chartWidget} - onClick={() => {setSelectedChartId(widget) - console.log('click'); - + onClick={() => { + setSelectedChartId(widget); + console.log("click"); }} > {/* Kebab Icon */} @@ -333,10 +333,13 @@ export const DraggableWidget = ({
Duplicate
-
{ - e.stopPropagation() - deleteSelectedChart(); - }}> +
{ + e.stopPropagation(); + deleteSelectedChart(); + }} + >
diff --git a/app/src/pages/Project.tsx b/app/src/pages/Project.tsx index 4fe26b3..59e110c 100644 --- a/app/src/pages/Project.tsx +++ b/app/src/pages/Project.tsx @@ -86,7 +86,7 @@ const Project: React.FC = () => { {!selectedUser && ( <> - {loadingProgress > 0 && } + {/* {loadingProgress > 0 && } */} {!isPlaying && ( <> {toggleThreeD && } @@ -122,7 +122,7 @@ const Project: React.FC = () => { } onDragOver={(event) => event.preventDefault()} > - + {/* */}
{selectedUser && } {isLogListVisible && ( @@ -130,7 +130,7 @@ const Project: React.FC = () => { )} -
); }; diff --git a/app/src/styles/components/marketPlace/marketPlace.scss b/app/src/styles/components/marketPlace/marketPlace.scss index 4caf82c..73a2445 100644 --- a/app/src/styles/components/marketPlace/marketPlace.scss +++ b/app/src/styles/components/marketPlace/marketPlace.scss @@ -2,6 +2,9 @@ @use "../../abstracts/mixins.scss" as *; .marketplace-wrapper { + // transform: scale(0.65); + /* Start at 90% width */ + height: 100vh; width: 100vw; z-index: #{$z-index-marketplace}; @@ -11,6 +14,7 @@ top: 0; padding: 10px; padding-top: 100px; + // animation: growWidth 0.4s ease-in-out 0.5s forwards; .marketplace-container { position: relative; @@ -31,6 +35,58 @@ flex-direction: column; gap: 24px; + .skeleton-wrapper { + display: flex; + flex-wrap: wrap; + gap: 18px; + margin: 0; + width: 100%; + + .skeleton-content { + + + width: calc(25% - 14px) !important; + height: auto !important; + border-radius: #{$border-radius-xlarge}; + padding: 12px; + box-shadow: 0px 2px 10.5px 0px #0000000d; + background: var(--background-color-solid-gradient); + border: 1px solid var(--border-color); + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + gap: 6px; + + .asset-image { + width: 100%; + height: 100%; + } + + .asset-details { + width: 100%; + height: 33px; + } + + .organization { + width: 40%; + height: 15px; + } + + .asset-review { + width: 100%; + height: 20px; + } + + .button { + + width: 100%; + height: 35px; + border-radius: 20px; + } + } + } + .filter-search-container { width: 100%; display: flex; @@ -84,6 +140,13 @@ .stars { display: flex; align-items: center; + + .star-wrapper.filled { + svg { + + fill: #F3A50C; + } + } } } } @@ -226,6 +289,17 @@ } } +@keyframes growWidth { + from { + transform: scale(0.65); + } + + to { + transform: scale(1); + } +} + + .assetPreview-wrapper { width: 100%; height: 100%; diff --git a/app/src/styles/components/menu/menu.scss b/app/src/styles/components/menu/menu.scss index ef7c3c6..d25173c 100644 --- a/app/src/styles/components/menu/menu.scss +++ b/app/src/styles/components/menu/menu.scss @@ -90,7 +90,7 @@ .dropdown-menu { position: absolute; top: 0; - left: 103%; + left: 100%; background: var(--background-color-solid); min-width: 220px; border-radius: #{$border-radius-medium}; @@ -141,7 +141,7 @@ .submenu { position: absolute; - left: 102%; + left: 100%; top: 0; background: var(--background-color-solid); min-width: 200px; diff --git a/app/src/styles/components/simulation/analysis.scss b/app/src/styles/components/simulation/analysis.scss index 1967540..f86a5a8 100644 --- a/app/src/styles/components/simulation/analysis.scss +++ b/app/src/styles/components/simulation/analysis.scss @@ -378,12 +378,30 @@ text-overflow: ellipsis; } + .metric-label.loss { + background: #6D4343; + border: 1px solid #FF301D + } + .metric-value { text-align: center; line-height: 20px; } } + .metric-item.loss { + background: #6D4343; + border: 1px solid #FF301D; + + .metric-label { + span { + color: #FF311E; + display: inline-block; + transform: rotate(180deg); + } + } + } + .metric-wrapper { display: flex; gap: 6px; diff --git a/app/src/styles/components/visualization/floating/common.scss b/app/src/styles/components/visualization/floating/common.scss index 101d8cd..56c49b2 100644 --- a/app/src/styles/components/visualization/floating/common.scss +++ b/app/src/styles/components/visualization/floating/common.scss @@ -456,7 +456,7 @@ padding: 18px 10px; position: relative; z-index: 1; - top: -32px; + // top: -32px; } .barOverflow { @@ -482,4 +482,3 @@ transition: transform 0.5s ease; } -// progress should be progress {progress} \ No newline at end of file diff --git a/app/src/styles/layout/sidebar.scss b/app/src/styles/layout/sidebar.scss index 9fc9990..1e56faf 100644 --- a/app/src/styles/layout/sidebar.scss +++ b/app/src/styles/layout/sidebar.scss @@ -1392,4 +1392,36 @@ } } } -} \ No newline at end of file +} + + +.skeleton-wrapper { + display: flex; + + .skeleton-content {} + + .asset-name { + width: 40%; + height: 10px; + } + + .asset { + width: 100%; + height: 100%; + } +} + + + + +.sidebar-left-wrapper, +.sidebar-right-wrapper { + height: calc(50vh + 150px); + overflow-y: hidden; + transition: height 0.4s ease-in-out; +} + +.sidebar-left-wrapper.closed, +.sidebar-right-wrapper.closed { + height: 52px; +} diff --git a/app/src/styles/layout/skeleton.scss b/app/src/styles/layout/skeleton.scss index 977beda..9df0331 100644 --- a/app/src/styles/layout/skeleton.scss +++ b/app/src/styles/layout/skeleton.scss @@ -1,5 +1,5 @@ .skeleton-wrapper { - max-width: 600px; + // max-width: 600px; margin: 0 auto; width: 100%;