refactor: remove the suspense card in favour of spinner

it was quite annoying that nothing would be accessible if soarca was not reachabble. Also the skeleton cards were quite ugly, I changed it to a simple spinner.

Author: Paul2803k

src/api/utils.ts

@@ -77,8 +77,8 @@ export async function deleteToApi(url: string): Promise<void> {
  * @example
  * const errorResponse = apiErrorToErrorResponse(error);
  */
-export const getErrorFromApiResponse = (error: Error): ErrorResponse => {
-  if (error && error instanceof Error) {
+export const getErrorFromApiResponse = (error: unknown): ErrorResponse => {
+  if (error instanceof Error) {
     try {
       return JSON.parse(error.message) as ErrorResponse;
     } catch {
@@ -90,14 +90,14 @@ export const getErrorFromApiResponse = (error: Error): ErrorResponse => {
 
 /**
  * Formats an error for display in a toast notification.
- * @param error - The Error object to format
+ * @param error - The error to format (any value; non-Error inputs use the default message)
  * @param defaultMessage - The default message to use if the error does not have a specific message
  * @returns Formatted error message string
  * @example
  * const message = formatErrorForToast(error, "An unexpected error occurred.");
  */
 export const formatErrorForToast = (
-  error: Error,
+  error: unknown,
   defaultMessage: string,
 ): string => {
   const parsed = getErrorFromApiResponse(error);

src/components/Containers.tsx

@@ -34,3 +34,10 @@ export const PageContainer = styled.div<PageContainerProps>`
 
   padding: 0;
 `;
+
+export const CenteredCardContent = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 12rem;
+`;

src/components/CopyButton.tsx

@@ -2,6 +2,7 @@ import { Copy } from "lucide-react";
 import React from "react";
 import toast from "react-hot-toast";
 
+import { formatErrorForToast } from "@/api/utils";
 import { Button } from "./Button";
 import Icon from "./Icon";
 import { ThemeSize } from "./utils";
@@ -23,8 +24,6 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
   disabled = false,
   ...rest
 }) => {
-
-
   const handleClick = async (e: React.MouseEvent) => {
     e.stopPropagation();
     if (disabled || !$text) return;
@@ -33,8 +32,7 @@ export const CopyButton: React.FC<CopyButtonProps> = ({
       await navigator.clipboard.writeText($text);
       toast.success("Copied to clipboard");
     } catch (err) {
-      console.error("Copy failed", err);
-      toast.error("Failed to copy to clipboard");
+      toast.error(formatErrorForToast(err, "Failed to copy to clipboard"));
     }
   };
 

src/components/Form.tsx

@@ -18,7 +18,7 @@ export const Input = styled.input`
 
   padding: ${({ theme }) => theme.spacing.md} ${({ theme }) => theme.spacing.md};
 
-  font: ${({ theme }) => theme.typography.caption.font};
+  font: ${({ theme }) => theme.typography.body.font};
   color: ${({ theme }) => theme.colors.text.primary};
   background: ${({ theme }) => theme.colors.background.primary};
 
@@ -53,16 +53,24 @@ export const Input = styled.input`
 const StyledSelect = styled.select`
   width: 100%;
   box-sizing: border-box;
+  appearance: none;
+  -webkit-appearance: none;
 
   border: 1px solid ${({ theme }) => theme.colors.border.medium};
   border-radius: ${({ theme }) => theme.radius.md};
 
-  padding: ${({ theme }) => `${theme.spacing.sm} ${theme.spacing.md}`};
+  padding: ${({ theme }) =>
+    `${theme.spacing.md} ${theme.spacing["2xl"]} ${theme.spacing.md} ${theme.spacing.md}`};
 
   font: ${({ theme }) => theme.typography.body.font};
   color: ${({ theme }) => theme.colors.text.primary};
-  background: ${({ theme }) => theme.colors.background.primary};
-  line-height: 1.5;
+  background-color: ${({ theme }) => theme.colors.background.primary};
+  background-image: ${({ theme }) => {
+    const color = theme.colors.text.tertiary.replace("#", "%23");
+    return `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='${color}' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C%2Fsvg%3E")`;
+  }};
+  background-repeat: no-repeat;
+  background-position: right ${({ theme }) => theme.spacing.md} center;
 
   transition: border-color ${({ theme }) => theme.transitions.base};
 
@@ -80,7 +88,7 @@ const StyledSelect = styled.select`
   &:disabled {
     opacity: 0.5;
     cursor: not-allowed;
-    background: ${({ theme }) => theme.colors.background.secondary};
+    background-color: ${({ theme }) => theme.colors.background.secondary};
   }
 
   & > option {

src/components/cards/SuspenseCard.tsx

@@ -1,3 +1,2 @@
 export * from "./Card";
 export * from "./ExpandableCard";
-export * from "./SuspenseCard";

src/components/cards/index.ts

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 import { FormLabel, Link } from "@/components";
 import {
@@ -7,30 +7,28 @@ import {
 } from "@/pages/main-page/monitoring-page/ExecutionDetailPage.styles";
 import { MadeWithLove, PixelHeart } from "./Credits.styles";
 
+const TRIGGER = "credits";
+
 /**
  * Little fun easter egg that shows credits when the user types "credits".
  * It also desappears when the user types anything else.
  * I would like to add all the contributosrs here, but for now it's just me :)
  */
 export const CreditsEasterEgg: React.FC = () => {
   const [showEasterEgg, setShowEasterEgg] = useState(false);
-  const [keyBuffer, setKeyBuffer] = useState("");
+  const keyBufferRef = useRef("");
 
   useEffect(() => {
     const handleKeyPress = (e: KeyboardEvent) => {
-      const newBuffer = (keyBuffer + e.key).slice(-7);
-      setKeyBuffer(newBuffer);
-
-      if (newBuffer === "credits") {
-        setShowEasterEgg(true);
-      } else if (showEasterEgg) {
-        setShowEasterEgg(false);
-      }
+      keyBufferRef.current = (keyBufferRef.current + e.key).slice(
+        -TRIGGER.length,
+      );
+      setShowEasterEgg(keyBufferRef.current === TRIGGER);
     };
 
     window.addEventListener("keydown", handleKeyPress);
     return () => window.removeEventListener("keydown", handleKeyPress);
-  }, [keyBuffer, showEasterEgg]);
+  }, []);
 
   if (!showEasterEgg) {
     return null;