fix(skeleton): loading state

nextui-org · Oct 4, 2023 · a85d49a · a85d49a
1 parent c303dc8
commit a85d49a
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 5 deletions.
diff --git a/apps/docs/content/components/skeleton/loaded.ts b/apps/docs/content/components/skeleton/loaded.ts
@@ -9,7 +9,7 @@ export default function App() {
 
   return (
     <div className="flex flex-col gap-3">
-      <Card className="w-[200px] space-y-5 p-4" radius="2xl">
+      <Card className="w-[200px] space-y-5 p-4" radius="lg">
         <Skeleton isLoaded={isLoaded} className="rounded-lg">
           <div className="h-24 rounded-lg bg-secondary"></div>
         </Skeleton>

diff --git a/apps/docs/content/components/skeleton/usage.ts b/apps/docs/content/components/skeleton/usage.ts
@@ -2,7 +2,7 @@ const App = `import {Card, Skeleton} from "@nextui-org/react";
 
 export default function App() {
   return (
-    <Card className="w-[200px] space-y-5 p-4" radius="2xl">
+    <Card className="w-[200px] space-y-5 p-4" radius="lg">
       <Skeleton className="rounded-lg">
         <div className="h-24 rounded-lg bg-default-300"></div>
       </Skeleton>

diff --git a/packages/components/skeleton/package.json b/packages/components/skeleton/package.json
@@ -44,6 +44,8 @@
     "@nextui-org/react-utils": "workspace:*"
   },
   "devDependencies": {
+    "@nextui-org/card": "workspace:*",
+    "@nextui-org/button": "workspace:*",
     "clean-package": "2.2.0",
     "react": "^18.0.0"
   },

diff --git a/packages/components/skeleton/stories/skeleton.stories.tsx b/packages/components/skeleton/stories/skeleton.stories.tsx
@@ -1,8 +1,10 @@
 import React from "react";
 import {Meta} from "@storybook/react";
 import {skeleton} from "@nextui-org/theme";
+import {Card} from "@nextui-org/card";
+import {Button} from "@nextui-org/button";
 
-import {Skeleton} from "../src";
+import {Skeleton, SkeletonProps} from "../src";
 
 export default {
   title: "Components/Skeleton",
@@ -30,9 +32,95 @@ const defaultProps = {
   children: <div className="w-[200px] h-[100px]">NextUI</div>,
 };
 
+const DefaultTemplate = (args: SkeletonProps) => (
+  <Card className="w-[200px] space-y-5 p-4" radius="lg">
+    <Skeleton className="rounded-lg" {...args}>
+      <div className="h-24 rounded-lg bg-default-300" />
+    </Skeleton>
+    <div className="space-y-3">
+      <Skeleton className="w-3/5 rounded-lg" {...args}>
+        <div className="h-3 w-3/5 rounded-lg bg-default-200" />
+      </Skeleton>
+      <Skeleton className="w-4/5 rounded-lg" {...args}>
+        <div className="h-3 w-4/5 rounded-lg bg-default-200" />
+      </Skeleton>
+      <Skeleton className="w-2/5 rounded-lg" {...args}>
+        <div className="h-3 w-2/5 rounded-lg bg-default-300" />
+      </Skeleton>
+    </div>
+  </Card>
+);
+
+const StandaloneTemplate = (args: SkeletonProps) => (
+  <div className="max-w-[300px] w-full flex items-center gap-3">
+    <div>
+      <Skeleton className="flex rounded-full w-12 h-12" />
+    </div>
+    <div className="w-full flex flex-col gap-2">
+      <Skeleton className="h-3 w-3/5 rounded-lg" {...args} />
+      <Skeleton className="h-3 w-4/5 rounded-lg" {...args} />
+    </div>
+  </div>
+);
+
+const LoadedStateTemplate = (args: SkeletonProps) => {
+  const [isLoaded, setIsLoaded] = React.useState(false);
+
+  const toggleLoad = () => {
+    setIsLoaded(!isLoaded);
+  };
+
+  return (
+    <div className="flex flex-col gap-3">
+      <Card className="w-[200px] space-y-5 p-4" radius="lg">
+        <Skeleton className="rounded-lg" {...args} isLoaded={isLoaded}>
+          <div className="h-24 rounded-lg bg-secondary" />
+        </Skeleton>
+        <div className="space-y-3">
+          <Skeleton className="w-3/5 rounded-lg" {...args} isLoaded={isLoaded}>
+            <div className="h-3 w-full rounded-lg bg-secondary" />
+          </Skeleton>
+          <Skeleton className="w-4/5 rounded-lg" {...args} isLoaded={isLoaded}>
+            <div className="h-3 w-full rounded-lg bg-secondary-300" />
+          </Skeleton>
+          <Skeleton className="w-2/5 rounded-lg" {...args} isLoaded={isLoaded}>
+            <div className="h-3 w-full rounded-lg bg-secondary-200" />
+          </Skeleton>
+        </div>
+      </Card>
+      <Button
+        className="max-w-[200px]"
+        color="secondary"
+        size="sm"
+        variant="flat"
+        onPress={toggleLoad}
+      >
+        {isLoaded ? "Show" : "Hide"} Skeleton
+      </Button>
+    </div>
+  );
+};
+
 export const Default = {
+  render: DefaultTemplate,
+
+  args: {
+    ...defaultProps,
+  },
+};
+
+export const Standalone = {
+  render: StandaloneTemplate,
+
+  args: {
+    ...defaultProps,
+  },
+};
+
+export const LoadedState = {
+  render: LoadedStateTemplate,
+
   args: {
     ...defaultProps,
-    className: "rounded-xl",
   },
 };
diff --git a/packages/core/theme/src/components/skeleton.ts b/packages/core/theme/src/components/skeleton.ts
@@ -40,7 +40,7 @@ const skeleton = tv({
       "after:bg-content3",
       "dark:after:bg-content2",
       // state
-      "data-[loaded=true]:bg-transparent",
+      "data-[loaded=true]:!bg-transparent",
       "data-[loaded=true]:before:opacity-0 data-[loaded=true]:before:animate-none",
       "data-[loaded=true]:after:opacity-0",
     ],

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml