Improve gallery scroll indicators and format code

Co-authored-by: arielcostas <94913521+arielcostas@users.noreply.github.com>

1 files changed, 29 insertions, 4 deletions

diff --git a/src/frontend/app/components/StopItemSkeleton.tsx b/src/frontend/app/components/StopItemSkeleton.tsx
index 9133393..76559de 100644
--- a/src/frontend/app/components/StopItemSkeleton.tsx
+++ b/src/frontend/app/components/StopItemSkeleton.tsx
@@ -3,14 +3,15 @@ import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";
 
 interface StopItemSkeletonProps {
-    showId?: boolean;
-    stopId?: number;
+  showId?: boolean;
+  stopId?: number;
 }
 
 const StopItemSkeleton: React.FC<StopItemSkeletonProps> = ({
-    showId = false,
-    stopId
+  showId = false,
+  stopId,
 }) => {
+<<<<<<< HEAD
     return (
         <SkeletonTheme baseColor="var(--skeleton-base)" highlightColor="var(--skeleton-highlight)">
             <li className="list-item">
@@ -37,6 +38,30 @@ const StopItemSkeleton: React.FC<StopItemSkeletonProps> = ({
             </li>
         </SkeletonTheme>
     );
+=======
+  return (
+    <SkeletonTheme baseColor="#f0f0f0" highlightColor="#e0e0e0">
+      <li className="list-item">
+        <div className="list-item-link">
+          <span>{showId && stopId && <>({stopId}) </>}</span>
+          <Skeleton
+            width={showId ? "60%" : "80%"}
+            style={{ display: "inline-block" }}
+          />
+          <div className="line-icons" style={{ marginTop: "4px" }}>
+            <Skeleton
+              count={3}
+              width="30px"
+              height="20px"
+              inline={true}
+              style={{ marginRight: "0.5rem" }}
+            />
+          </div>
+        </div>
+      </li>
+    </SkeletonTheme>
+  );
+>>>>>>> 88e0621 (Improve gallery scroll indicators and format code)
 };
 
 export default StopItemSkeleton;