Initial commit

src/components/ImageWithFallback/ImageWithFallback.module.css

@@ -0,0 +1,134 @@
+/* ImageWithFallback component styles */
+.loadingContainer {
+  background-color: #f8f9fa;
+  overflow: hidden;
+  border: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.loadingSpinner {
+  animation: spin 1s linear infinite;
+  color: #6c757d;
+}
+
+.loadingSpinner circle:first-child {
+  animation: dash 1.5s ease-in-out infinite;
+}
+
+.loadingText {
+  margin-top: 8px;
+  font-size: 11px;
+  color: #6c757d;
+  font-weight: 500;
+}
+
+.placeholderIcon {
+  color: #6c757d;
+  opacity: 0.7;
+}
+
+/* Spinner animation */
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dasharray: 1, 150;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 90, 150;
+    stroke-dashoffset: -124;
+  }
+}
+
+/* Loading state transitions */
+.loadingState {
+  transition: opacity 0.3s ease-in-out;
+  background-color: #f8f9fa;
+  z-index: 2;
+}
+
+/* Error state */
+.errorState {
+  background-color: #f8d7da;
+  color: #721c24;
+}
+
+/* Success state */
+.successState {
+  background-color: #d4edda;
+  color: #155724;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .loadingText {
+    font-size: 10px;
+  }
+
+  .placeholderIcon {
+    width: 24px;
+    height: 24px;
+  }
+}
+
+/* Dark theme support */
+@media (prefers-color-scheme: dark) {
+  /* .loadingContainer {
+    background-color: #343a40;
+  } */
+
+  .loadingText {
+    color: #adb5bd;
+  }
+
+  .placeholderIcon {
+    color: #adb5bd;
+  }
+}
+
+/* HTML: <div class="loader"></div> */
+.loader {
+  width: 30px;
+  aspect-ratio: 1;
+  display: grid;
+  border-radius: 50%;
+  background:
+    linear-gradient(0deg, rgb(0 0 0/50%) 30%, #0000 0 70%, rgb(0 0 0/100%) 0)
+      50%/8% 100%,
+    linear-gradient(90deg, rgb(0 0 0/25%) 30%, #0000 0 70%, rgb(0 0 0/75%) 0)
+      50%/100% 8%;
+  background-repeat: no-repeat;
+  animation: l23 1s infinite steps(12);
+}
+.loader::before,
+.loader::after {
+  content: "";
+  grid-area: 1/1;
+  border-radius: 50%;
+  background: inherit;
+  opacity: 0.915;
+  transform: rotate(30deg);
+}
+.loader::after {
+  opacity: 0.83;
+  transform: rotate(60deg);
+}
+@keyframes l23 {
+  100% {
+    transform: rotate(1turn);
+  }
+}