diff --git a/src/Gallery/insertYourLoaderHere/ShowCase b/src/Gallery/insertYourLoaderHere/ShowCase new file mode 100644 index 0000000..b86e268 --- /dev/null +++ b/src/Gallery/insertYourLoaderHere/ShowCase @@ -0,0 +1,79 @@ +import React from 'react' +import ContentLoader from 'react-content-loader' + +export const ShowcaseLoader = () => { + const loaderStyle = ` + .showcase-skeleton-card { + background: #fff; + border-radius: 8px; + overflow: hidden; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + } + + .skeleton-image { + width: 100%; + height: 200px; + background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); + background-size: 200% 100%; + animation: shimmer 1.5s infinite; + } + + .skeleton-content { + padding: 15px; + } + + .skeleton-text { + background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); + background-size: 200% 100%; + animation: shimmer 1.5s infinite; + border-radius: 4px; + margin-bottom: 10px; + } + + .skeleton-title { + height: 20px; + width: 85%; + } + + .skeleton-subtitle { + height: 16px; + width: 65%; + margin-bottom: 15px; + } + + .skeleton-button { + height: 36px; + width: 40%; + border-radius: 20px; + } + + @keyframes shimmer { + 0% { background-position: 200% 0; } + 100% { background-position: -200% 0; } + } + `; + + return ( + <> + +
+
+
+ {[0, 1, 2, 3].map((index) => ( +
+
+
+
+
+
+
+
+
+
+ ))} +
+
+
+ + ); +};