From 6838d9d9bc5d4b0c888df26fea9cb0cc2d595c49 Mon Sep 17 00:00:00 2001
From: Rishabh Mishra <me@rsbh.dev>
Date: Thu, 14 Sep 2023 19:49:15 +0530
Subject: [PATCH] fix(sdk): use variables in loader styles (#339)

---
 sdks/js/.changeset/fast-ears-attack.md          |  5 +++++
 .../react/components/organization/profile.tsx   | 17 ++++++++++++-----
 2 files changed, 17 insertions(+), 5 deletions(-)
 create mode 100644 sdks/js/.changeset/fast-ears-attack.md

diff --git a/sdks/js/.changeset/fast-ears-attack.md b/sdks/js/.changeset/fast-ears-attack.md
new file mode 100644
index 000000000..af34e5456
--- /dev/null
+++ b/sdks/js/.changeset/fast-ears-attack.md
@@ -0,0 +1,5 @@
+---
+'@raystack/frontier': patch
+---
+
+use theme variables in loader colors
diff --git a/sdks/js/packages/core/react/components/organization/profile.tsx b/sdks/js/packages/core/react/components/organization/profile.tsx
index df377b254..0dbbcfbc9 100644
--- a/sdks/js/packages/core/react/components/organization/profile.tsx
+++ b/sdks/js/packages/core/react/components/organization/profile.tsx
@@ -29,6 +29,8 @@ import { AddTeam } from './teams/add';
 import { DeleteTeam } from './teams/delete';
 import { TeamPage } from './teams/team';
 import { UserSetting } from './user';
+import { SkeletonTheme } from 'react-loading-skeleton';
+
 interface OrganizationProfileProps {
   organizationId: string;
   defaultRoute?: string;
@@ -38,11 +40,16 @@ const rootRoute = new RootRoute({
   component: () => {
     return (
       <ThemeProvider>
-        <Toaster richColors />
-        <Flex style={{ width: '100%', height: '100%' }}>
-          <Sidebar />
-          <Outlet />
-        </Flex>
+        <SkeletonTheme
+          highlightColor="var(--background-base)"
+          baseColor="var(--background-base-hover)"
+        >
+          <Toaster richColors />
+          <Flex style={{ width: '100%', height: '100%' }}>
+            <Sidebar />
+            <Outlet />
+          </Flex>
+        </SkeletonTheme>
       </ThemeProvider>
     );
   }