From e19fe5a63750e04576c36af47eaf005be4b1ffd9 Mon Sep 17 00:00:00 2001 From: Hemang Kandwal Date: Tue, 28 Jan 2025 20:26:00 +0530 Subject: [PATCH] Revert "feat(frontend): add loader and loading states" This reverts commit 46a79565092b5001d7ca05378464d9727b629aca. --- frontend/src/components/button.tsx | 2 +- frontend/src/components/classes.ts | 4 -- frontend/src/components/dropdown.tsx | 2 +- frontend/src/components/loading.tsx | 44 +++++-------------- frontend/src/index.css | 21 --------- frontend/src/pages/chat/chat.tsx | 2 +- frontend/src/pages/graph/graph.tsx | 4 +- .../src/pages/raw-execute/raw-execute.tsx | 18 ++++---- .../storage-unit/explore-storage-unit.tsx | 23 +++------- .../src/pages/storage-unit/storage-unit.tsx | 4 +- frontend/tailwind.config.js | 35 +-------------- 11 files changed, 36 insertions(+), 123 deletions(-) diff --git a/frontend/src/components/button.tsx b/frontend/src/components/button.tsx index 7a15ff23..9e124e43 100644 --- a/frontend/src/components/button.tsx +++ b/frontend/src/components/button.tsx @@ -16,7 +16,7 @@ export type IButtonProps = { export const Button: FC = (props) => { return
diff --git a/frontend/src/components/classes.ts b/frontend/src/components/classes.ts index bdb228f7..708c2747 100644 --- a/frontend/src/components/classes.ts +++ b/frontend/src/components/classes.ts @@ -1,7 +1,3 @@ -export const ClassNames = { - Text: "text-neutral-600 dark:text-neutral-300", -} - export const BASE_CARD_CLASS = "bg-white h-[200px] w-[200px] rounded-3xl shadow-sm border p-4 flex flex-col justify-between dark:bg-white/10 dark:border-white/5"; export const BRAND_COLOR = "text-[#ca6f1e] dark:text-[#ca6f1e]"; export const BRAND_COLOR_BG = "bg-[#ca6f1e] dark:bg-[#ca6f1e]"; \ No newline at end of file diff --git a/frontend/src/components/dropdown.tsx b/frontend/src/components/dropdown.tsx index f54557e4..6f5c474e 100644 --- a/frontend/src/components/dropdown.tsx +++ b/frontend/src/components/dropdown.tsx @@ -56,7 +56,7 @@ export const Dropdown: FC = (props) => { return (
{props.loading ?
- +
: <>
diff --git a/frontend/src/components/loading.tsx b/frontend/src/components/loading.tsx index e06e189a..9cab4cdd 100644 --- a/frontend/src/components/loading.tsx +++ b/frontend/src/components/loading.tsx @@ -1,48 +1,26 @@ import classNames from "classnames"; import { FC } from "react"; import { twMerge } from "tailwind-merge"; -import { ClassNames } from "./classes"; type ILoadingProps = { className?: string; hideText?: boolean; + containerClassName?: string; loadingText?: string; - size?: "lg" | "md" | "sm"; + textClassName?: string; } -export const Loading: FC = ({ className, hideText, loadingText, size = "md" }) => { - if (size === "sm") { - return
-
-
- -
-
+export const Loading: FC = ({ containerClassName, className, hideText, loadingText, textClassName }) => { + return ( +
+ { !hideText && -
{loadingText}
+
{ loadingText ?? "Loading..."}
}
- } - if (size === "md") { - return
-
-
- -
-
- { - !hideText && -
{loadingText}
- } -
- } - return
; -} - - -export const LoadingPage: FC = () => { - return
- -
+ ) } \ No newline at end of file diff --git a/frontend/src/index.css b/frontend/src/index.css index 58e90dd0..7650706e 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -2,27 +2,6 @@ @tailwind components; @tailwind utilities; - -@layer utilities { - .loader { - --g1: conic-gradient(from 90deg at top 3px left 3px, transparent 90deg, #666666 0); - --g2: conic-gradient(from -90deg at bottom 3px right 3px, transparent 90deg, #666666 0); - background: var(--g1), var(--g1), var(--g1), var(--g1), var(--g2), var(--g2), var(--g2), var(--g2); - background-position: 0 0, 100% 0, 100% 100%, 0 100%; - background-repeat: no-repeat; - animation: boxy 1.5s infinite; - } - - .dark .loader { - --g1: conic-gradient(from 90deg at top 3px left 3px, transparent 90deg, #bbb 0); - --g2: conic-gradient(from -90deg at bottom 3px right 3px, transparent 90deg, #bbb 0); - background: var(--g1), var(--g1), var(--g1), var(--g1), var(--g2), var(--g2), var(--g2), var(--g2); - background-position: 0 0, 100% 0, 100% 100%, 0 100%; - background-repeat: no-repeat; - animation: boxy 1.5s infinite; - } -} - body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', diff --git a/frontend/src/pages/chat/chat.tsx b/frontend/src/pages/chat/chat.tsx index 0a4c1c8f..a5aad2f7 100644 --- a/frontend/src/pages/chat/chat.tsx +++ b/frontend/src/pages/chat/chat.tsx @@ -391,7 +391,7 @@ export const ChatPage: FC = () => { }) } { loading &&
- +
}
diff --git a/frontend/src/pages/graph/graph.tsx b/frontend/src/pages/graph/graph.tsx index 971c95b1..a417f4c7 100644 --- a/frontend/src/pages/graph/graph.tsx +++ b/frontend/src/pages/graph/graph.tsx @@ -6,7 +6,7 @@ import { GraphElements } from "../../components/graph/constants"; import { Graph, IGraphInstance } from "../../components/graph/graph"; import { createEdge, createNode } from "../../components/graph/utils"; import { Icons } from "../../components/icons"; -import { LoadingPage } from "../../components/loading"; +import { Loading } from "../../components/loading"; import { InternalPage } from "../../components/page"; import { InternalRoutes } from "../../config/routes"; import { GetGraphDocument, GetGraphQuery, GetGraphQueryVariables } from "../../generated/graphql"; @@ -62,7 +62,7 @@ export const GraphPage: FC = () => { if (loading) { return - + } diff --git a/frontend/src/pages/raw-execute/raw-execute.tsx b/frontend/src/pages/raw-execute/raw-execute.tsx index 31bfcff9..76e0f600 100644 --- a/frontend/src/pages/raw-execute/raw-execute.tsx +++ b/frontend/src/pages/raw-execute/raw-execute.tsx @@ -5,7 +5,7 @@ import { v4 } from "uuid"; import { AnimatedButton } from "../../components/button"; import { CodeEditor } from "../../components/editor"; import { Icons } from "../../components/icons"; -import { Loading, LoadingPage } from "../../components/loading"; +import { Loading } from "../../components/loading"; import { InternalPage } from "../../components/page"; import { Table } from "../../components/table"; import { InternalRoutes } from "../../config/routes"; @@ -50,7 +50,11 @@ const RawExecuteCell: FC = ({ cellId, onAdd, onDelete, sho return
- + { + loading + ? + : + }
= ({ cellId, onAdd, onDelete, sho }
- +
{ @@ -72,16 +76,12 @@ const RawExecuteCell: FC = ({ cellId, onAdd, onDelete, sho
} { - loading - ?
- -
- : rows != null && submittedCode.length > 0 && + rows != null && submittedCode.length > 0 && (isCodeAQuery ?
c.Name)} columnTags={rows.RawExecute.Columns.map(c => c.Type)} - rows={rows.RawExecute.Rows} totalPages={1} currentPage={1} disableEdit={true} /> + rows={rows.RawExecute.Rows} totalPages={1} currentPage={1} disableEdit={true} /> :
Action Executed diff --git a/frontend/src/pages/storage-unit/explore-storage-unit.tsx b/frontend/src/pages/storage-unit/explore-storage-unit.tsx index 1a0e1ff4..c8b55220 100644 --- a/frontend/src/pages/storage-unit/explore-storage-unit.tsx +++ b/frontend/src/pages/storage-unit/explore-storage-unit.tsx @@ -8,7 +8,7 @@ import { AnimatedButton } from "../../components/button"; import { Dropdown } from "../../components/dropdown"; import { Icons } from "../../components/icons"; import { Input, InputWithlabel } from "../../components/input"; -import { Loading, LoadingPage } from "../../components/loading"; +import { Loading } from "../../components/loading"; import { InternalPage } from "../../components/page"; import { Table } from "../../components/table"; import { graphqlClient } from "../../config/graphql-client"; @@ -36,7 +36,6 @@ export const ExploreStorageUnit: FC = () => { const [showAdd, setShowAdd] = useState(false); const [newRowForm, setNewRowForm] = useState([]); const [checkedRows, setCheckedRows] = useState>(new Set()); - const [deleting, setDeleting] = useState(false); const [getStorageUnitRows, { loading }] = useGetStorageUnitRowsLazyQuery({ onCompleted(data) { @@ -45,7 +44,7 @@ export const ExploreStorageUnit: FC = () => { }, fetchPolicy: "no-cache", }); - const [addRow, { loading: adding }] = useAddRowMutation(); + const [addRow,] = useAddRowMutation(); const unitName = useMemo(() => { return unit?.Name; @@ -118,9 +117,7 @@ export const ExploreStorageUnit: FC = () => { if (current == null || rows == null || checkedRows.size === 0) { return; } - let unableToDeleteAll = false; const deletedIndexes = []; - setDeleting(true); for (const index of [...checkedRows].sort()) { const row = rows.Rows[index]; if (row == null) { @@ -140,7 +137,7 @@ export const ExploreStorageUnit: FC = () => { storageUnit: unitName, type: current.Type as DatabaseType, values, - }, + } }); if (data?.DeleteRow.Status) { return res(); @@ -157,8 +154,6 @@ export const ExploreStorageUnit: FC = () => { } else { notify(`Unable to delete the row: ${e}`, "error"); } - setDeleting(false); - unableToDeleteAll=true; break; } } @@ -173,10 +168,7 @@ export const ExploreStorageUnit: FC = () => { Rows: newRows, }); setCheckedRows(newCheckedRows); - if (!unableToDeleteAll) { - notify("Row deleted successfully!", "success"); - } - setDeleting(false); + notify("Row deleted successfully!", "success"); }, [checkedRows, current, rows, schema, unitName]); const totalCount = useMemo(() => { @@ -411,7 +403,7 @@ export const ExploreStorageUnit: FC = () => { if (loading) { return - + } @@ -442,9 +434,8 @@ export const ExploreStorageUnit: FC = () => { }, }} animate={showAdd ? "open" : "close"}>
- {adding || deleting && } - {checkedRows.size > 0 && 1 ? "Delete rows" : "Delete row"} iconClassName="stroke-red-500 dark:stroke-red-500" labelClassName="text-red-500 dark:text-red-500" onClick={handleRowDelete} disabled={deleting} /> } - + {checkedRows.size > 0 && 1 ? "Delete rows" : "Delete row"} iconClassName="stroke-red-500 dark:stroke-red-500" labelClassName="text-red-500 dark:text-red-500" onClick={handleRowDelete} /> } +
{ if (loading) { return - + } diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js index 181a14cf..cf9244ab 100644 --- a/frontend/tailwind.config.js +++ b/frontend/tailwind.config.js @@ -5,38 +5,7 @@ module.exports = { ], darkMode: 'selector', theme: { - extend: { - fontFamily: { - title: `"Megrim", -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', - 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', - sans-serif;`, - }, - colors: { - brand: "#BF853E", - }, - animation: { - fade: 'fadeOut 300ms ease-in-out', - boxy: 'boxy 1.5s infinite', - }, - keyframes: () => ({ - fadeOut: { - '0%': { - opacity: 0, - }, - '100%': { - opacity: 100, - }, - }, - boxy: { - '0%': { backgroundSize: '35px 15px,15px 15px,15px 35px,35px 35px' }, - '25%': { backgroundSize: '35px 35px,15px 35px,15px 15px,35px 15px' }, - '50%': { backgroundSize: '15px 35px,35px 35px,35px 15px,15px 15px' }, - '75%': { backgroundSize: '15px 15px,35px 15px,35px 35px,15px 35px' }, - '100%': { backgroundSize: '35px 15px,15px 15px,15px 35px,35px 35px' }, - }, - }), - }, + extend: {}, }, plugins: [], -} - +} \ No newline at end of file