fix: datatable loader and sidebar style issues (#303)

rsbh · web-flow · commit c5f8b44c91cd · 2025-03-12T11:54:04.000+05:30
* fix: skeleton loading color

* fix: remove profile from sidebar

* refactor: use forwaredRef in sidebar

* fix: remove icon heigth and width

* fix: example
diff --git a/apps/www/examples/shield-ts/shield.tsx b/apps/www/examples/shield-ts/shield.tsx
@@ -14,7 +14,7 @@ import {
   TimerIcon,
 } from "@radix-ui/react-icons";
 import { useRouter } from "next/navigation";
-import { Flex, Image, Sidebar } from "@raystack/apsara/v1";
+import { Avatar, Flex, Image, Sidebar } from "@raystack/apsara/v1";
 import { Assets } from "./assets";
 
 import "@raystack/apsara/style.css";
@@ -26,40 +26,58 @@ export const Shield = () => {
   return (
     <>
       <Flex style={{ height: "100vh" }}>
-        <div style={{ position: 'relative' }}>
+        <div style={{ position: "relative" }}>
           <Sidebar
-            open={sidebarOpen} 
-            onOpenChange={setSidebarOpen} 
+            open={sidebarOpen}
+            onOpenChange={setSidebarOpen}
             position="left"
-            profile={{
-              icon: <DotsVerticalIcon />,
-              label: "john.doe@apsara.com",
-              href: "#"
-            }}
           >
             <Sidebar.Header
-              logo={<Image radius="small" src="/thenorthface-logo.svg" width={24} height={24} />} 
+              logo={
+                <Image
+                  radius="small"
+                  src="/thenorthface-logo.svg"
+                  width={24}
+                  height={24}
+                />
+              }
               title="THE NORTH FACE"
               onLogoClick={() => console.log("Logo clicked")}
             />
             <Sidebar.Main>
               <Sidebar.Group name="Navigation" className="">
-                <Sidebar.Item href="#" icon={<GitHubLogoIcon />} active>Explore</Sidebar.Item>
-                <Sidebar.Item href="#" icon={<ImageIcon />}>AOIs</Sidebar.Item>
-                <Sidebar.Item href="#" icon={<BookmarkFilledIcon />}>Workflows</Sidebar.Item>
-                <Sidebar.Item href="#" icon={<MaskOnIcon />}>Marketplace</Sidebar.Item>
-                <Sidebar.Item href="#" icon={<LinkedInLogoIcon />}>Activity</Sidebar.Item>
+                <Sidebar.Item href="#" icon={<Avatar fallback="RM" size={3} />}>
+                  Explore
+                </Sidebar.Item>
+                <Sidebar.Item href="#" icon={<ImageIcon />}>
+                  AOIs
+                </Sidebar.Item>
+                <Sidebar.Item href="#" icon={<BookmarkFilledIcon />}>
+                  Workflows
+                </Sidebar.Item>
+                <Sidebar.Item href="#" icon={<MaskOnIcon />}>
+                  Marketplace
+                </Sidebar.Item>
+                <Sidebar.Item href="#" icon={<LinkedInLogoIcon />}>
+                  Activity
+                </Sidebar.Item>
               </Sidebar.Group>
             </Sidebar.Main>
             <Sidebar.Footer>
               <Sidebar.Group name="Help & Support">
-                <Sidebar.Item href="#" icon={<GlobeIcon />}>Feedback</Sidebar.Item>
-                <Sidebar.Item href="#" icon={<LapTimerIcon />}>Support</Sidebar.Item>
-                <Sidebar.Item href="#" icon={<InfoCircledIcon />}>Documentation</Sidebar.Item>
+                <Sidebar.Item href="#" icon={<GlobeIcon />}>
+                  Feedback
+                </Sidebar.Item>
+                <Sidebar.Item href="#" icon={<LapTimerIcon />}>
+                  Support
+                </Sidebar.Item>
+                <Sidebar.Item href="#" icon={<InfoCircledIcon />}>
+                  Documentation
+                </Sidebar.Item>
               </Sidebar.Group>
             </Sidebar.Footer>
           </Sidebar>
-          
+
           {/* <button 
             onClick={() => setSidebarOpen(!sidebarOpen)}
             style={{ 
diff --git a/packages/raystack/v1/components/data-table/components/content.tsx b/packages/raystack/v1/components/data-table/components/content.tsx
@@ -78,7 +78,10 @@ function LoaderRows({
       <Table.Row key={"loading-row-" + rowIndex}>
         {columns.map((_, colIndex) => (
           <Table.Cell key={"loading-column-" + colIndex}>
-            <Skeleton />
+            <Skeleton
+              highlightColor="var(--rs-color-background-base-primary)"
+              baseColor="var(--rs-color-background-base-primary-hover)"
+            />
           </Table.Cell>
         ))}
       </Table.Row>
diff --git a/packages/raystack/v1/components/sidebar/sidebar.module.css b/packages/raystack/v1/components/sidebar/sidebar.module.css
@@ -2,7 +2,8 @@
   display: flex;
   width: 220px;
   height: 100%;
-  padding: var(--rs-space-1) var(--rs-space-3) var(--rs-space-5) var(--rs-space-3);;
+  padding: var(--rs-space-1) var(--rs-space-3) var(--rs-space-5)
+    var(--rs-space-3);
   flex-direction: column;
   justify-content: space-between;
   align-items: flex-start;
@@ -12,19 +13,19 @@
   transition: width 0.2s ease;
 }
 
-.root[data-position='left'] {
+.root[data-position="left"] {
   border-right: 1px solid var(--rs-color-border-base-primary);
 }
 
-.root[data-position='right'] {
+.root[data-position="right"] {
   border-left: 1px solid var(--rs-color-border-base-primary);
 }
 
-.root[data-state='expanded'] {
+.root[data-state="expanded"] {
   width: 240px;
 }
 
-.root[data-state='collapsed'] {
+.root[data-state="collapsed"] {
   width: 48px;
 }
 
@@ -90,7 +91,7 @@
   transition: all 0.2s ease;
 }
 
-.root[data-state='collapsed'] .nav-item {
+.root[data-state="collapsed"] .nav-item {
   justify-content: center;
 }
 
@@ -99,7 +100,7 @@
   color: var(--rs-color-foreground-base-primary);
 }
 
-.nav-item[data-active='true'] {
+.nav-item[data-active="true"] {
   display: flex;
   padding: var(--rs-space-3);
   align-items: center;
@@ -110,7 +111,7 @@
   color: var(--rs-color-foreground-base-primary);
 }
 
-.nav-item[data-disabled='true'] {
+.nav-item[data-disabled="true"] {
   opacity: 0.6;
   cursor: not-allowed;
   pointer-events: none;
@@ -121,8 +122,8 @@
   align-items: center;
   gap: var(--rs-space-3);
   align-self: stretch;
-  width: 16px;
-  height: 16px;
+  width: fit-content;
+  height: auto;
   flex-shrink: 0;
 }
 
@@ -140,8 +141,8 @@
   transition: opacity 0.2s ease;
 }
 
-.root[data-state='collapsed'] .nav-text,
-.root[data-state='collapsed'] .title {
+.root[data-state="collapsed"] .nav-text,
+.root[data-state="collapsed"] .title {
   width: 0;
   opacity: 0;
   display: none;
@@ -161,7 +162,7 @@
   background-color: 0.5px solid var(--rs-color-border-base-primary);
 }
 
-.root[data-position='right'] .resizeHandle {
+.root[data-position="right"] .resizeHandle {
   left: 0;
   right: auto;
   cursor: col-resize;
@@ -186,7 +187,7 @@
   color: var(--rs-color-foreground-base-primary);
 }
 
-.root[data-state='collapsed'] .account .nav-text {
+.root[data-state="collapsed"] .account .nav-text {
   opacity: 0;
   display: none;
 }
@@ -218,7 +219,7 @@
   gap: var(--rs-space-2);
 }
 
-.root[data-state='collapsed'] .nav-group-name {
+.root[data-state="collapsed"] .nav-group-name {
   width: 0;
   opacity: 0;
   display: none;
diff --git a/packages/raystack/v1/components/sidebar/sidebar.tsx b/packages/raystack/v1/components/sidebar/sidebar.tsx
