add: expand infinite scrolling to stacks and profiles

crates/app/src/public/css/root.css

@@ -213,6 +213,14 @@ ol {
     margin-left: var(--pad-4);
 }
 
+pre {
+    padding: var(--pad-4);
+}
+
+code {
+    padding: var(--pad-1);
+}
+
 pre,
 code {
     font-family: "Jetbrains Mono", "Fire Code", monospace;
@@ -221,18 +229,12 @@ code {
     overflow: auto;
     background: var(--color-lowered);
     border-radius: var(--radius);
-    padding: var(--pad-1);
     font-size: 0.8rem;
 }
 
-pre {
-    padding: var(--pad-4);
-}
-
 svg.icon {
     stroke: currentColor;
     width: 18px;
-    width: 1em;
     height: 1em;
 }
 
@@ -263,7 +265,6 @@ code {
     overflow-wrap: normal;
     text-wrap: pretty;
     word-wrap: break-word;
-    overflow-wrap: anywhere;
 }
 
 h1,
@@ -275,7 +276,6 @@ h6 {
     margin: 0;
     font-weight: 700;
     width: -moz-max-content;
-    width: max-content;
     position: relative;
     max-width: 100%;
 }
@@ -350,3 +350,42 @@ blockquote {
     border-left: solid 5px var(--color-super-lowered);
     font-style: italic;
 }
+
+.skel {
+    display: block;
+    border-radius: var(--radius);
+    background: var(--color-raised);
+    animation: skel ease-in-out infinite 2s forwards running;
+    transition: opacity 0.15s;
+}
+
+@keyframes skel {
+    from {
+        background: var(--color-raised);
+    }
+
+    50% {
+        background: var(--color-lowered);
+    }
+
+    to {
+        background: var(--color-raised);
+    }
+}
+
+.loader {
+    animation: spin linear infinite 2s forwards running;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+@keyframes spin {
+    from {
+        transform: rotateZ(0deg);
+    }
+
+    to {
+        transform: rotateZ(360deg);
+    }
+}