fix(sdk): use variables in loader styles (#339)

raystack · Sep 14, 2023 · 6838d9d · 6838d9d
1 parent 1dd2ea7
commit 6838d9d
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/sdks/js/.changeset/fast-ears-attack.md 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
@@ -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>
     );
   }