Merge pull request #1335 from thunderstore-io/02-21-fix_horizontal_overflow_with_stalenessindicator

Fix horizontal overflow with StalenessIndicator

Author: Oksamies

apps/cyberstorm-remix/app/commonComponents/PackageSearch/PackageSearch.tsx

@@ -22,7 +22,6 @@ import {
   useNavigationType,
   useSearchParams,
 } from "@remix-run/react";
-import { StalenessIndicator } from "@thunderstore/cyberstorm/src/components/StalenessIndicator/StalenessIndicator";
 import { PackageCount } from "./components/PackageCount/PackageCount";
 import {
   isPackageOrderOptions,
@@ -34,6 +33,7 @@ import { RadioGroup } from "../RadioGroup/RadioGroup";
 import { CategoryTagCloud } from "./components/CategoryTagCloud/CategoryTagCloud";
 import { CollapsibleMenu } from "../Collapsible/Collapsible";
 import { CheckboxList } from "../CheckboxList/CheckboxList";
+import { StalenessIndicator } from "../StalenessIndicator/StalenessIndicator";
 
 const PER_PAGE = 20;
 
@@ -417,7 +417,7 @@ export function PackageSearch(props: Props) {
         </div>
         <StalenessIndicator
           isStale={navigation.state === "loading" ? true : false}
-          className="package-search__packages"
+          rootClasses="package-search__packages"
         >
           {listings.results.length > 0 ? (
             <div className="package-search__grid">

apps/cyberstorm-remix/app/commonComponents/StalenessIndicator/StalenessIndicator.css

@@ -0,0 +1,32 @@
+@layer nimbus-components {
+  .staleness-indicator__wrapper {
+    opacity: 0.5;
+  }
+
+  .staleness-indicator {
+    position: absolute;
+    z-index: 3;
+    display: flex;
+    align-items: flex-start;
+    padding: 5rem 0 10rem;
+
+    > svg {
+      position: sticky;
+      top: 40vh;
+      width: 5rem;
+      height: 5rem;
+      animation: rotation 1s linear infinite;
+      min-inline-size: auto;
+    }
+  }
+
+  @keyframes rotation {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+}

apps/cyberstorm-remix/app/commonComponents/StalenessIndicator/StalenessIndicator.tsx

@@ -0,0 +1,35 @@
+import "./StalenessIndicator.css";
+import { ReactNode } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSpinnerThird } from "@fortawesome/pro-solid-svg-icons";
+import { classnames } from "@thunderstore/cyberstorm/src/utils/utils";
+import { NewIcon } from "@thunderstore/cyberstorm";
+
+interface Props {
+  children: ReactNode;
+  rootClasses?: string;
+  isStale: boolean;
+}
+
+export function StalenessIndicator(props: Props) {
+  const { children, rootClasses, isStale = false } = props;
+  return (
+    <>
+      <div
+        className={classnames(
+          isStale ? "staleness-indicator__wrapper" : null,
+          rootClasses
+        )}
+      >
+        {isStale ? (
+          <NewIcon wrapperClasses="staleness-indicator">
+            <FontAwesomeIcon icon={faSpinnerThird} />
+          </NewIcon>
+        ) : undefined}
+        {children}
+      </div>
+    </>
+  );
+}
+
+StalenessIndicator.displayName = "StalenessIndicator";