napp-wallet-post-feed-test 1.0.47

package/dist/components/LoadingSkeletons.js

@@ -0,0 +1,978 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React from 'react';
+import PropTypes from 'prop-types';
+
+// Get theme-aware colors based on the actual theme used in the app
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var getThemeColors = function getThemeColors() {
+  var _document$body, _document$body2;
+  // Check if we're in a dark theme environment
+  var isDarkTheme = ((_document$body = document.body) === null || _document$body === void 0 ? void 0 : _document$body.style.backgroundColor) === '#03001c' || ((_document$body2 = document.body) === null || _document$body2 === void 0 ? void 0 : _document$body2.classList.contains('dark')) || window.matchMedia('(prefers-color-scheme: dark)').matches;
+  if (isDarkTheme) {
+    return {
+      primary: '#4231c0',
+      background: '#03001c',
+      cardBackground: '#0b111d',
+      skeletonLight: '#1a1a2e',
+      skeletonDark: '#16213e',
+      text: '#ffffff',
+      border: '#2d3748',
+      shimmerLight: '#232c39',
+      shimmerDark: '#2c3542'
+    };
+  }
+
+  // Light theme fallback
+  return {
+    primary: '#4231c0',
+    background: '#ffffff',
+    cardBackground: '#f8f9fa',
+    skeletonLight: '#e9ecef',
+    skeletonDark: '#dee2e6',
+    text: '#000000',
+    border: '#ced4da',
+    shimmerLight: '#f6f7f8',
+    shimmerDark: '#e9ecef'
+  };
+};
+
+// Enhanced skeleton animation styles with theme-aware colors
+var skeletonStyles = {
+  shimmer: {
+    background: "linear-gradient(90deg, ".concat(getThemeColors().skeletonLight, " 25%, ").concat(getThemeColors().skeletonDark, " 50%, ").concat(getThemeColors().skeletonLight, " 75%)"),
+    backgroundSize: '200% 100%',
+    animation: 'shimmer 1.5s infinite'
+  },
+  pulse: {
+    backgroundColor: getThemeColors().skeletonDark,
+    animation: 'pulse 1.5s ease-in-out infinite'
+  }
+};
+
+// CSS animations for skeletons
+var skeletonAnimations = "\n  @keyframes shimmer {\n    0% { background-position: -200% 0; }\n    100% { background-position: 200% 0; }\n  }\n  \n  @keyframes pulse {\n    0%, 100% { opacity: 1; }\n    50% { opacity: 0.5; }\n  }\n  \n  @keyframes fadeIn {\n    from { opacity: 0; transform: translateY(10px); }\n    to { opacity: 1; transform: translateY(0); }\n  }\n  \n  @keyframes placeHolderShimmer {\n    0% { background-position: -800px 0; }\n    100% { background-position: 800px 0; }\n  }\n";
+
+// Inject animations into document head
+if (typeof document !== 'undefined') {
+  var style = document.createElement('style');
+  style.textContent = skeletonAnimations;
+  if (!document.head.querySelector('#skeleton-animations')) {
+    style.id = 'skeleton-animations';
+    document.head.appendChild(style);
+  }
+}
+
+/**
+ * Enhanced Post Card Skeleton
+ */
+export var PostCardSkeleton = function PostCardSkeleton(_ref) {
+  var _ref$showMedia = _ref.showMedia,
+    showMedia = _ref$showMedia === void 0 ? true : _ref$showMedia,
+    _ref$showActions = _ref.showActions,
+    showActions = _ref$showActions === void 0 ? true : _ref$showActions;
+  var colors = getThemeColors();
+  return /*#__PURE__*/_jsxs("div", {
+    className: "post-card-skeleton",
+    style: {
+      padding: '15px',
+      margin: '10px 0',
+      backgroundColor: colors.cardBackground,
+      boxShadow: "0 2px 4px ".concat(colors.border),
+      animation: 'fadeIn 0.3s ease-out',
+      border: "1px solid ".concat(colors.border)
+    },
+    children: [/*#__PURE__*/_jsxs("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        marginBottom: '15px'
+      },
+      children: [/*#__PURE__*/_jsx("div", {
+        style: _objectSpread(_objectSpread({
+          width: '40px',
+          height: '40px',
+          borderRadius: '50%'
+        }, skeletonStyles.shimmer), {}, {
+          marginRight: '12px'
+        })
+      }), /*#__PURE__*/_jsxs("div", {
+        style: {
+          flex: 1
+        },
+        children: [/*#__PURE__*/_jsx("div", {
+          style: _objectSpread(_objectSpread({
+            height: '16px',
+            width: '120px'
+          }, skeletonStyles.shimmer), {}, {
+            marginBottom: '6px'
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          style: _objectSpread({
+            height: '12px',
+            width: '80px'
+          }, skeletonStyles.shimmer)
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        style: _objectSpread({
+          width: '24px',
+          height: '24px',
+          borderRadius: '50%'
+        }, skeletonStyles.pulse)
+      })]
+    }), /*#__PURE__*/_jsxs("div", {
+      style: {
+        marginBottom: '15px'
+      },
+      children: [/*#__PURE__*/_jsx("div", {
+        style: _objectSpread(_objectSpread({
+          height: '18px',
+          width: '90%'
+        }, skeletonStyles.shimmer), {}, {
+          marginBottom: '8px'
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        style: _objectSpread(_objectSpread({
+          height: '14px',
+          width: '70%'
+        }, skeletonStyles.shimmer), {}, {
+          marginBottom: '6px'
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        style: _objectSpread({
+          height: '14px',
+          width: '60%'
+        }, skeletonStyles.shimmer)
+      })]
+    }), showMedia && /*#__PURE__*/_jsx("div", {
+      style: _objectSpread(_objectSpread({
+        height: '200px'
+      }, skeletonStyles.shimmer), {}, {
+        marginBottom: '15px'
+      })
+    }), showActions && /*#__PURE__*/_jsxs("div", {
+      style: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center'
+      },
+      children: [/*#__PURE__*/_jsxs("div", {
+        style: {
+          display: 'flex',
+          gap: '20px'
+        },
+        children: [/*#__PURE__*/_jsx("div", {
+          style: _objectSpread({
+            width: '60px',
+            height: '20px',
+            borderRadius: '10px'
+          }, skeletonStyles.pulse)
+        }), /*#__PURE__*/_jsx("div", {
+          style: _objectSpread({
+            width: '60px',
+            height: '20px',
+            borderRadius: '10px'
+          }, skeletonStyles.pulse)
+        }), /*#__PURE__*/_jsx("div", {
+          style: _objectSpread({
+            width: '60px',
+            height: '20px',
+            borderRadius: '10px'
+          }, skeletonStyles.pulse)
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        style: _objectSpread({
+          width: '40px',
+          height: '20px',
+          borderRadius: '10px'
+        }, skeletonStyles.pulse)
+      })]
+    })]
+  });
+};
+
+/**
+ * Enhanced Media Grid Skeleton with better preloading
+ */
+export var MediaGridSkeleton = function MediaGridSkeleton(_ref2) {
+  var _ref2$itemCount = _ref2.itemCount,
+    itemCount = _ref2$itemCount === void 0 ? 3 : _ref2$itemCount,
+    _ref2$aspectRatio = _ref2.aspectRatio,
+    aspectRatio = _ref2$aspectRatio === void 0 ? '16/9' : _ref2$aspectRatio,
+    _ref2$className = _ref2.className,
+    className = _ref2$className === void 0 ? '' : _ref2$className;
+  var colors = getThemeColors();
+  var getGridLayout = function getGridLayout() {
+    switch (itemCount) {
+      case 1:
+        return {
+          gridTemplateColumns: '1fr',
+          gridTemplateRows: '1fr'
+        };
+      case 2:
+        return {
+          gridTemplateColumns: '1fr 1fr',
+          gridTemplateRows: '1fr',
+          gap: '4px'
+        };
+      case 3:
+        return {
+          gridTemplateColumns: '1fr 1fr',
+          gridTemplateRows: '1fr 1fr',
+          gap: '4px'
+        };
+      default:
+        return {
+          gridTemplateColumns: '1fr 1fr',
+          gridTemplateRows: '1fr 1fr',
+          gap: '4px'
+        };
+    }
+  };
+  var _aspectRatio$split$ma = aspectRatio.split('/').map(Number),
+    _aspectRatio$split$ma2 = _slicedToArray(_aspectRatio$split$ma, 2),
+    width = _aspectRatio$split$ma2[0],
+    height = _aspectRatio$split$ma2[1];
+  var paddingTop = height / width * 100;
+
+  // Enhanced skeleton styles with better animations
+  var enhancedSkeletonStyles = {
+    shimmer: {
+      background: "linear-gradient(90deg, ".concat(colors.skeletonLight, " 25%, ").concat(colors.skeletonDark, " 50%, ").concat(colors.skeletonLight, " 75%)"),
+      backgroundSize: '200% 100%',
+      animation: 'shimmer 1.5s infinite',
+      position: 'relative',
+      overflow: 'hidden'
+    },
+    pulse: {
+      backgroundColor: colors.skeletonDark,
+      animation: 'pulse 1.5s ease-in-out infinite',
+      position: 'relative'
+    }
+  };
+
+  // Staggered animation delays for grid items
+  var getStaggeredDelay = function getStaggeredDelay(index) {
+    return "".concat(index * 0.1, "s");
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: "enhanced-media-grid-skeleton ".concat(className),
+    style: _objectSpread(_objectSpread({
+      display: 'grid'
+    }, getGridLayout()), {}, {
+      overflow: 'hidden',
+      position: 'relative',
+      width: '100%',
+      height: '100%',
+      minHeight: '200px'
+    }),
+    children: [Array.from({
+      length: Math.min(itemCount, 3)
+    }).map(function (_, index) {
+      return /*#__PURE__*/_jsxs("div", {
+        className: "grid-skeleton-item grid-skeleton-item-".concat(index),
+        style: _objectSpread({
+          position: 'relative',
+          width: '100%',
+          height: '100%',
+          animationDelay: getStaggeredDelay(index)
+        }, enhancedSkeletonStyles.shimmer),
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "skeleton-shimmer-overlay",
+          style: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            background: "linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%)",
+            animation: 'shimmer 2s infinite',
+            animationDelay: getStaggeredDelay(index)
+          }
+        }), /*#__PURE__*/_jsx("div", {
+          style: {
+            position: 'absolute',
+            top: '2px',
+            left: '2px',
+            right: '2px',
+            bottom: '2px',
+            border: "1px solid ".concat(colors.border),
+            opacity: 0.3
+          }
+        })]
+      }, index);
+    }), itemCount > 3 && /*#__PURE__*/_jsxs("div", {
+      className: "extra-items-overlay",
+      style: {
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        backgroundColor: colors.primary,
+        color: colors.text,
+        padding: '8px 12px',
+        borderRadius: '6px',
+        fontSize: '14px',
+        fontWeight: 'bold',
+        boxShadow: "0 2px 8px rgba(0,0,0,0.2)",
+        zIndex: 10,
+        animation: 'pulse 2s ease-in-out infinite'
+      },
+      children: ["+", itemCount - 3]
+    }), /*#__PURE__*/_jsx("div", {
+      className: "grid-loading-indicator",
+      style: {
+        position: 'absolute',
+        top: '8px',
+        right: '8px',
+        width: '20px',
+        height: '20px',
+        borderRadius: '50%',
+        border: "2px solid ".concat(colors.border),
+        borderTop: "2px solid ".concat(colors.primary),
+        animation: 'spin 1s linear infinite',
+        zIndex: 5
+      }
+    })]
+  });
+};
+
+/**
+ * Enhanced Post Grid Skeleton for feed
+ */
+export var PostGridSkeleton = function PostGridSkeleton(_ref3) {
+  var _ref3$count = _ref3.count,
+    count = _ref3$count === void 0 ? 6 : _ref3$count,
+    _ref3$className = _ref3.className,
+    className = _ref3$className === void 0 ? '' : _ref3$className;
+  var colors = getThemeColors();
+  return /*#__PURE__*/_jsx("div", {
+    className: "post-grid-skeleton ".concat(className),
+    style: {
+      display: 'grid',
+      gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
+      gap: '16px',
+      padding: '16px'
+    },
+    children: Array.from({
+      length: count
+    }).map(function (_, index) {
+      return /*#__PURE__*/_jsxs("div", {
+        className: "post-grid-item-skeleton",
+        style: {
+          backgroundColor: colors.cardBackground,
+          borderRadius: '12px',
+          padding: '16px',
+          border: "1px solid ".concat(colors.border),
+          animation: 'fadeIn 0.3s ease-out',
+          animationDelay: "".concat(index * 0.1, "s"),
+          opacity: 0,
+          animationFillMode: 'forwards'
+        },
+        children: [/*#__PURE__*/_jsxs("div", {
+          style: {
+            display: 'flex',
+            alignItems: 'center',
+            marginBottom: '12px'
+          },
+          children: [/*#__PURE__*/_jsx("div", {
+            style: _objectSpread(_objectSpread({
+              width: '40px',
+              height: '40px',
+              borderRadius: '50%'
+            }, skeletonStyles.shimmer), {}, {
+              marginRight: '12px'
+            })
+          }), /*#__PURE__*/_jsxs("div", {
+            style: {
+              flex: 1
+            },
+            children: [/*#__PURE__*/_jsx("div", {
+              style: _objectSpread(_objectSpread({
+                height: '14px',
+                width: '80px'
+              }, skeletonStyles.shimmer), {}, {
+                marginBottom: '4px'
+              })
+            }), /*#__PURE__*/_jsx("div", {
+              style: _objectSpread({
+                height: '12px',
+                width: '60px'
+              }, skeletonStyles.shimmer)
+            })]
+          })]
+        }), /*#__PURE__*/_jsxs("div", {
+          style: {
+            marginBottom: '12px'
+          },
+          children: [/*#__PURE__*/_jsx("div", {
+            style: _objectSpread(_objectSpread({
+              height: '16px',
+              width: '90%'
+            }, skeletonStyles.shimmer), {}, {
+              marginBottom: '6px'
+            })
+          }), /*#__PURE__*/_jsx("div", {
+            style: _objectSpread({
+              height: '12px',
+              width: '70%'
+            }, skeletonStyles.shimmer)
+          })]
+        }), /*#__PURE__*/_jsx(MediaGridSkeleton, {
+          itemCount: Math.floor(Math.random() * 3) + 1,
+          aspectRatio: "16/9"
+        })]
+      }, index);
+    })
+  });
+};
+
+/**
+ * Enhanced Feed Loading Skeleton with grid layout
+ */
+export var FeedLoadingSkeleton = function FeedLoadingSkeleton(_ref4) {
+  var _ref4$count = _ref4.count,
+    count = _ref4$count === void 0 ? 3 : _ref4$count,
+    _ref4$layout = _ref4.layout,
+    layout = _ref4$layout === void 0 ? 'list' : _ref4$layout;
+  if (layout === 'grid') {
+    return /*#__PURE__*/_jsx(PostGridSkeleton, {
+      count: count
+    });
+  }
+  return /*#__PURE__*/_jsx("div", {
+    className: "feed-loading-skeleton",
+    children: Array.from({
+      length: count
+    }).map(function (_, index) {
+      return /*#__PURE__*/_jsx(PostCardSkeleton, {
+        showMedia: index % 2 === 0 // Alternate showing media
+        ,
+        showActions: true
+      }, index);
+    })
+  });
+};
+
+/**
+ * Modal Loading Skeleton
+ */
+export var ModalLoadingSkeleton = function ModalLoadingSkeleton() {
+  var colors = getThemeColors();
+  return /*#__PURE__*/_jsxs("div", {
+    className: "modal-loading-skeleton",
+    style: {
+      padding: '20px',
+      textAlign: 'center',
+      backgroundColor: colors.cardBackground
+    },
+    children: [/*#__PURE__*/_jsx("div", {
+      style: _objectSpread(_objectSpread({
+        width: '60px',
+        height: '60px',
+        borderRadius: '50%'
+      }, skeletonStyles.shimmer), {}, {
+        margin: '0 auto 20px'
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      style: _objectSpread(_objectSpread({
+        height: '20px',
+        width: '200px'
+      }, skeletonStyles.shimmer), {}, {
+        margin: '0 auto 10px'
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      style: _objectSpread(_objectSpread({
+        height: '16px',
+        width: '150px'
+      }, skeletonStyles.shimmer), {}, {
+        margin: '0 auto'
+      })
+    })]
+  });
+};
+
+/**
+ * Video Player Skeleton
+ */
+export var VideoPlayerSkeleton = function VideoPlayerSkeleton(_ref5) {
+  var _ref5$aspectRatio = _ref5.aspectRatio,
+    aspectRatio = _ref5$aspectRatio === void 0 ? '16/9' : _ref5$aspectRatio;
+  var colors = getThemeColors();
+  var _aspectRatio$split$ma3 = aspectRatio.split('/').map(Number),
+    _aspectRatio$split$ma4 = _slicedToArray(_aspectRatio$split$ma3, 2),
+    width = _aspectRatio$split$ma4[0],
+    height = _aspectRatio$split$ma4[1];
+  var paddingTop = height / width * 100;
+  return /*#__PURE__*/_jsx("div", {
+    style: {
+      position: 'relative',
+      width: '100%',
+      paddingTop: "".concat(paddingTop, "%"),
+      backgroundColor: colors.skeletonLight,
+      overflow: 'hidden'
+    },
+    children: /*#__PURE__*/_jsx("div", {
+      style: {
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        width: '60px',
+        height: '60px',
+        borderRadius: '50%',
+        backgroundColor: colors.primary,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        color: colors.text,
+        fontSize: '24px'
+      },
+      children: /*#__PURE__*/_jsx("i", {
+        className: "fas fa-play"
+      })
+    })
+  });
+};
+
+/**
+ * Profile Skeleton
+ */
+export var ProfileSkeleton = function ProfileSkeleton(_ref6) {
+  var _ref6$size = _ref6.size,
+    size = _ref6$size === void 0 ? 'medium' : _ref6$size;
+  var sizes = {
+    small: {
+      width: '32px',
+      height: '32px'
+    },
+    medium: {
+      width: '40px',
+      height: '40px'
+    },
+    large: {
+      width: '60px',
+      height: '60px'
+    }
+  };
+  return /*#__PURE__*/_jsx("div", {
+    style: _objectSpread(_objectSpread({}, sizes[size]), {}, {
+      borderRadius: '50%'
+    }, skeletonStyles.shimmer)
+  });
+};
+
+/**
+ * Text Skeleton
+ */
+export var TextSkeleton = function TextSkeleton(_ref7) {
+  var _ref7$lines = _ref7.lines,
+    lines = _ref7$lines === void 0 ? 1 : _ref7$lines,
+    _ref7$width = _ref7.width,
+    width = _ref7$width === void 0 ? '100%' : _ref7$width,
+    _ref7$height = _ref7.height,
+    height = _ref7$height === void 0 ? '16px' : _ref7$height;
+  return /*#__PURE__*/_jsx("div", {
+    children: Array.from({
+      length: lines
+    }).map(function (_, index) {
+      return /*#__PURE__*/_jsx("div", {
+        style: _objectSpread(_objectSpread({
+          height: height,
+          width: index === lines - 1 ? '60%' : width
+        }, skeletonStyles.shimmer), {}, {
+          marginBottom: index < lines - 1 ? '8px' : '0'
+        })
+      }, index);
+    })
+  });
+};
+
+/**
+ * Image Loader Skeleton (consolidated from PostcardLoader)
+ */
+export var PostImageLoader = function PostImageLoader(_ref8) {
+  var _ref8$aspectRatio = _ref8.aspectRatio,
+    aspectRatio = _ref8$aspectRatio === void 0 ? '16/9' : _ref8$aspectRatio,
+    _ref8$className = _ref8.className,
+    className = _ref8$className === void 0 ? '' : _ref8$className;
+  var colors = getThemeColors();
+  return /*#__PURE__*/_jsx("div", {
+    className: "post-image-skeleton ".concat(className),
+    style: {
+      aspectRatio: aspectRatio,
+      backgroundColor: colors.skeletonLight,
+      position: 'relative',
+      overflow: 'hidden'
+    },
+    children: /*#__PURE__*/_jsx("div", {
+      className: "post-feed-img-loader enhanced-skeleton",
+      style: {
+        background: "linear-gradient(to right, ".concat(colors.shimmerLight, " 8%, ").concat(colors.shimmerDark, " 18%, ").concat(colors.shimmerLight, " 33%)"),
+        backgroundSize: '800px 104px',
+        animation: 'placeHolderShimmer 2s linear infinite',
+        width: '100%',
+        height: '100%',
+        minHeight: '98px'
+      },
+      children: /*#__PURE__*/_jsx("div", {
+        className: "skeleton-shimmer"
+      })
+    })
+  });
+};
+
+/**
+ * Video Loader Skeleton (consolidated from PostcardLoader)
+ */
+export var PostVideoLoader = function PostVideoLoader(_ref9) {
+  var _ref9$aspectRatio = _ref9.aspectRatio,
+    aspectRatio = _ref9$aspectRatio === void 0 ? '16/9' : _ref9$aspectRatio,
+    _ref9$className = _ref9.className,
+    className = _ref9$className === void 0 ? '' : _ref9$className;
+  var colors = getThemeColors();
+  return /*#__PURE__*/_jsx("div", {
+    className: "post-video-skeleton ".concat(className),
+    style: {
+      aspectRatio: aspectRatio,
+      backgroundColor: colors.skeletonLight,
+      position: 'relative',
+      overflow: 'hidden'
+    },
+    children: /*#__PURE__*/_jsx("div", {
+      className: "post-feed-img-loader enhanced-skeleton",
+      style: {
+        background: "linear-gradient(to right, ".concat(colors.shimmerLight, " 8%, ").concat(colors.shimmerDark, " 18%, ").concat(colors.shimmerLight, " 33%)"),
+        backgroundSize: '800px 104px',
+        animation: 'placeHolderShimmer 2s linear infinite',
+        width: '100%',
+        height: '100%',
+        minHeight: '98px'
+      },
+      children: /*#__PURE__*/_jsx("div", {
+        className: "skeleton-shimmer"
+      })
+    })
+  });
+};
+
+/**
+ * Profile Loader Skeleton (consolidated from PostcardLoader)
+ */
+export var PostProfileLoader = function PostProfileLoader(_ref0) {
+  var _ref0$size = _ref0.size,
+    size = _ref0$size === void 0 ? '40px' : _ref0$size,
+    _ref0$className = _ref0.className,
+    className = _ref0$className === void 0 ? '' : _ref0$className;
+  var colors = getThemeColors();
+  return /*#__PURE__*/_jsx("div", {
+    className: "post-profile-skeleton ".concat(className),
+    style: {
+      width: size,
+      height: size,
+      backgroundColor: colors.skeletonLight,
+      borderRadius: '50%',
+      position: 'relative',
+      overflow: 'hidden'
+    },
+    children: /*#__PURE__*/_jsx("div", {
+      className: "poster-profile-img-loader enhanced-skeleton",
+      style: {
+        background: "linear-gradient(to right, ".concat(colors.shimmerLight, " 8%, ").concat(colors.shimmerDark, " 18%, ").concat(colors.shimmerLight, " 33%)"),
+        backgroundSize: '800px 104px',
+        animation: 'placeHolderShimmer 2s linear infinite',
+        width: '100%',
+        height: '100%'
+      },
+      children: /*#__PURE__*/_jsx("div", {
+        className: "skeleton-shimmer"
+      })
+    })
+  });
+};
+
+/**
+ * Complete Post Loader (consolidated from PostcardLoader)
+ */
+export var CompletePostLoader = function CompletePostLoader() {
+  var colors = getThemeColors();
+  return /*#__PURE__*/_jsxs("div", {
+    className: "post-card-skeleton enhanced-skeleton-card",
+    style: {
+      backgroundColor: colors.cardBackground,
+      padding: '15px',
+      margin: '10px 0',
+      border: "1px solid ".concat(colors.border)
+    },
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "skeleton-profile-section",
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        marginBottom: '15px'
+      },
+      children: [/*#__PURE__*/_jsx(PostProfileLoader, {
+        size: "40px"
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "skeleton-profile-info",
+        style: {
+          flex: 1,
+          marginLeft: '12px'
+        },
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "poster-profile-name-loader enhanced-skeleton",
+          style: {
+            height: '16px',
+            width: '120px',
+            background: "linear-gradient(to right, ".concat(colors.shimmerLight, " 8%, ").concat(colors.shimmerDark, " 18%, ").concat(colors.shimmerLight, " 33%)"),
+            backgroundSize: '800px 104px',
+            animation: 'placeHolderShimmer 2s linear infinite',
+            marginBottom: '6px'
+          },
+          children: /*#__PURE__*/_jsx("div", {
+            className: "skeleton-shimmer"
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          className: "post-date-loader enhanced-skeleton",
+          style: {
+            height: '12px',
+            width: '80px',
+            background: "linear-gradient(to right, ".concat(colors.shimmerLight, " 8%, ").concat(colors.shimmerDark, " 18%, ").concat(colors.shimmerLight, " 33%)"),
+            backgroundSize: '800px 104px',
+            animation: 'placeHolderShimmer 2s linear infinite'
+          },
+          children: /*#__PURE__*/_jsx("div", {
+            className: "skeleton-shimmer"
+          })
+        })]
+      })]
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "skeleton-content-section",
+      style: {
+        marginBottom: '15px'
+      },
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "post-profile-title enhanced-skeleton",
+        style: {
+          height: '18px',
+          width: '90%',
+          background: "linear-gradient(to right, ".concat(colors.shimmerLight, " 8%, ").concat(colors.shimmerDark, " 18%, ").concat(colors.shimmerLight, " 33%)"),
+          backgroundSize: '800px 104px',
+          animation: 'placeHolderShimmer 2s linear infinite',
+          marginBottom: '8px'
+        },
+        children: /*#__PURE__*/_jsx("div", {
+          className: "skeleton-shimmer"
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: "post-profile-title enhanced-skeleton",
+        style: {
+          height: '14px',
+          width: '70%',
+          background: "linear-gradient(to right, ".concat(colors.shimmerLight, " 8%, ").concat(colors.shimmerDark, " 18%, ").concat(colors.shimmerLight, " 33%)"),
+          backgroundSize: '800px 104px',
+          animation: 'placeHolderShimmer 2s linear infinite'
+        },
+        children: /*#__PURE__*/_jsx("div", {
+          className: "skeleton-shimmer"
+        })
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: "skeleton-media-section",
+      style: {
+        marginBottom: '15px'
+      },
+      children: /*#__PURE__*/_jsx(PostImageLoader, {
+        aspectRatio: "16/9"
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "skeleton-actions-section",
+      style: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center'
+      },
+      children: [/*#__PURE__*/_jsxs("div", {
+        style: {
+          display: 'flex',
+          gap: '20px'
+        },
+        children: [/*#__PURE__*/_jsx("div", {
+          className: "filter-btn-loader enhanced-skeleton",
+          style: {
+            width: '60px',
+            height: '20px',
+            borderRadius: '10px',
+            background: "linear-gradient(to right, ".concat(colors.shimmerLight, " 8%, ").concat(colors.shimmerDark, " 18%, ").concat(colors.shimmerLight, " 33%)"),
+            backgroundSize: '800px 104px',
+            animation: 'placeHolderShimmer 2s linear infinite'
+          },
+          children: /*#__PURE__*/_jsx("div", {
+            className: "skeleton-shimmer"
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          className: "filter-btn-loader enhanced-skeleton",
+          style: {
+            width: '60px',
+            height: '20px',
+            borderRadius: '10px',
+            background: "linear-gradient(to right, ".concat(colors.shimmerLight, " 8%, ").concat(colors.shimmerDark, " 18%, ").concat(colors.shimmerLight, " 33%)"),
+            backgroundSize: '800px 104px',
+            animation: 'placeHolderShimmer 2s linear infinite'
+          },
+          children: /*#__PURE__*/_jsx("div", {
+            className: "skeleton-shimmer"
+          })
+        }), /*#__PURE__*/_jsx("div", {
+          className: "filter-btn-loader enhanced-skeleton",
+          style: {
+            width: '60px',
+            height: '20px',
+            borderRadius: '10px',
+            background: "linear-gradient(to right, ".concat(colors.shimmerLight, " 8%, ").concat(colors.shimmerDark, " 18%, ").concat(colors.shimmerLight, " 33%)"),
+            backgroundSize: '800px 104px',
+            animation: 'placeHolderShimmer 2s linear infinite'
+          },
+          children: /*#__PURE__*/_jsx("div", {
+            className: "skeleton-shimmer"
+          })
+        })]
+      }), /*#__PURE__*/_jsx("div", {
+        style: {
+          width: '40px',
+          height: '20px',
+          borderRadius: '10px',
+          background: "linear-gradient(to right, ".concat(colors.shimmerLight, " 8%, ").concat(colors.shimmerDark, " 18%, ").concat(colors.shimmerLight, " 33%)"),
+          backgroundSize: '800px 104px',
+          animation: 'placeHolderShimmer 2s linear infinite'
+        },
+        children: /*#__PURE__*/_jsx("div", {
+          className: "skeleton-shimmer"
+        })
+      })]
+    })]
+  });
+};
+
+/**
+ * View Post Modal Skeleton (consolidated from PostcardLoader)
+ */
+export var ViewPostModalSkeleton = function ViewPostModalSkeleton() {
+  var colors = getThemeColors();
+  return /*#__PURE__*/_jsxs("div", {
+    className: "view-post-modal-skeleton",
+    style: {
+      backgroundColor: colors.cardBackground,
+      padding: '20px'
+    },
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "modal-header-skeleton",
+      style: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: '20px'
+      },
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "close-button-skeleton enhanced-skeleton",
+        style: {
+          width: '24px',
+          height: '24px',
+          borderRadius: '50%',
+          background: "linear-gradient(to right, ".concat(colors.shimmerLight, " 8%, ").concat(colors.shimmerDark, " 18%, ").concat(colors.shimmerLight, " 33%)"),
+          backgroundSize: '800px 104px',
+          animation: 'placeHolderShimmer 2s linear infinite'
+        },
+        children: /*#__PURE__*/_jsx("div", {
+          className: "skeleton-shimmer"
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: "title-skeleton enhanced-skeleton",
+        style: {
+          height: '20px',
+          width: '200px',
+          background: "linear-gradient(to right, ".concat(colors.shimmerLight, " 8%, ").concat(colors.shimmerDark, " 18%, ").concat(colors.shimmerLight, " 33%)"),
+          backgroundSize: '800px 104px',
+          animation: 'placeHolderShimmer 2s linear infinite'
+        },
+        children: /*#__PURE__*/_jsx("div", {
+          className: "skeleton-shimmer"
+        })
+      })]
+    }), /*#__PURE__*/_jsx("div", {
+      className: "modal-body-skeleton",
+      children: /*#__PURE__*/_jsx("div", {
+        className: "media-skeleton enhanced-skeleton",
+        style: {
+          height: '300px',
+          background: "linear-gradient(to right, ".concat(colors.shimmerLight, " 8%, ").concat(colors.shimmerDark, " 18%, ").concat(colors.shimmerLight, " 33%)"),
+          backgroundSize: '800px 104px',
+          animation: 'placeHolderShimmer 2s linear infinite'
+        },
+        children: /*#__PURE__*/_jsx("div", {
+          className: "skeleton-shimmer"
+        })
+      })
+    })]
+  });
+};
+
+// PropTypes
+PostCardSkeleton.propTypes = {
+  showMedia: PropTypes.bool,
+  showActions: PropTypes.bool
+};
+MediaGridSkeleton.propTypes = {
+  itemCount: PropTypes.number,
+  aspectRatio: PropTypes.string
+};
+FeedLoadingSkeleton.propTypes = {
+  count: PropTypes.number
+};
+VideoPlayerSkeleton.propTypes = {
+  aspectRatio: PropTypes.string
+};
+ProfileSkeleton.propTypes = {
+  size: PropTypes.oneOf(['small', 'medium', 'large'])
+};
+TextSkeleton.propTypes = {
+  lines: PropTypes.number,
+  width: PropTypes.string,
+  height: PropTypes.string
+};
+PostImageLoader.propTypes = {
+  aspectRatio: PropTypes.string,
+  className: PropTypes.string
+};
+PostVideoLoader.propTypes = {
+  aspectRatio: PropTypes.string,
+  className: PropTypes.string
+};
+PostProfileLoader.propTypes = {
+  size: PropTypes.string,
+  className: PropTypes.string
+};
+export default {
+  PostCardSkeleton: PostCardSkeleton,
+  MediaGridSkeleton: MediaGridSkeleton,
+  FeedLoadingSkeleton: FeedLoadingSkeleton,
+  ModalLoadingSkeleton: ModalLoadingSkeleton,
+  VideoPlayerSkeleton: VideoPlayerSkeleton,
+  ProfileSkeleton: ProfileSkeleton,
+  TextSkeleton: TextSkeleton,
+  PostImageLoader: PostImageLoader,
+  PostVideoLoader: PostVideoLoader,
+  PostProfileLoader: PostProfileLoader,
+  CompletePostLoader: CompletePostLoader,
+  ViewPostModalSkeleton: ViewPostModalSkeleton
+};