Skip to content

Commit faa3e42

Browse files
shravankumar8shravankumar8
committed
feat(loader): add reusable GIF loader and replace Spin usages (#157)
1 parent ed6d807 commit faa3e42

File tree

16 files changed

+84
-31
lines changed

16 files changed

+84
-31
lines changed

‎ui/src/assets/loader-squares.gif‎

260 KB
Loading

‎ui/src/modules/common/components/LazyLoadingIndicator.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { Spin } from "antd"
1+
2+
import Loader from "./Loader"
23

34
interface LazyLoadingIndicatorProps {
45
message?: string
@@ -9,7 +10,7 @@ const LazyLoadingIndicator: React.FC<LazyLoadingIndicatorProps> = ({
910
}) => {
1011
return (
1112
<div className="flex h-[calc(100vh-64px)] flex-col items-center justify-center">
12-
<Spin size="large" />
13+
<Loader size="large" />
1314
<p className="mt-4 text-gray-500">{message}</p>
1415
</div>
1516
)

‎ui/src/modules/common/components/Loader.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
// components/Loader.tsx
2+
import React from "react"
3+
import LoaderSquares from "../../../assets/loader-squares.gif"
4+
import { LoaderComponentSize } from "../../../utils/constants"
5+
6+
type LoaderProps = {
7+
size?: "large" | "small"
8+
tip?: string
9+
}
10+
11+
const Loader: React.FC<LoaderProps> = ({ size = "small" ,tip }) => {
12+
const width = size === "large" ? LoaderComponentSize.large : LoaderComponentSize.small
13+
14+
return (
15+
<div className="flex h-full w-full items-center justify-center">
16+
<img
17+
width={width}
18+
src={LoaderSquares}
19+
alt="Loading..."
20+
/>
21+
</div>
22+
)
23+
}
24+
25+
export default Loader

‎ui/src/modules/common/components/LoadingStates.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
1-
import { Spin } from "antd"
1+
2+
import Loader from "./Loader"
23

34
export const LoadingFallback = () => (
45
<div className="flex h-[calc(100vh-64px)] items-center justify-center">
5-
<Spin size="large" />
6+
<Loader size="large" />
67
</div>
78
)
89

910
export const AuthLoadingScreen = () => (
1011
<div className="flex h-screen items-center justify-center">
1112
<div className="text-center">
12-
<Spin size="large" />
13+
<Loader size="large" />
1314
</div>
1415
</div>
1516
)

‎ui/src/modules/destinations/pages/CreateDestination.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useState, useEffect, forwardRef, useImperativeHandle } from "react"
22
import { Link, useNavigate } from "react-router-dom"
3-
import { Input, message, Select, Spin } from "antd"
3+
import { Input, message, Select } from "antd"
44
import { ArrowLeft, ArrowRight, Info, Notebook } from "@phosphor-icons/react"
55

66
import { useAppStore } from "../../../store"
@@ -38,6 +38,7 @@ import TestConnectionFailureModal from "../../common/Modals/TestConnectionFailur
3838
import EntitySavedModal from "../../common/Modals/EntitySavedModal"
3939
import EntityCancelModal from "../../common/Modals/EntityCancelModal"
4040
import { connectorOptions } from "../components/connectorOptions"
41+
import Loader from "../../common/components/Loader"
4142

4243
type ConnectorType = (typeof CONNECTOR_TYPES)[keyof typeof CONNECTOR_TYPES]
4344

@@ -547,9 +548,10 @@ const CreateDestination = forwardRef<
547548
</FormField>
548549

549550
<FormField label="Version:">
550-
{loadingVersions ? (
551+
{loadingVersions || true ? (
551552
<div className="flex h-8 items-center justify-center">
552-
<Spin size="small" />
553+
554+
<Loader tip="" size="small"></Loader>
553555
</div>
554556
) : versions && versions.length > 0 ? (
555557
<Select
@@ -618,7 +620,8 @@ const CreateDestination = forwardRef<
618620
<>
619621
{loading ? (
620622
<div className="flex h-32 items-center justify-center">
621-
<Spin tip="Loading schema..." />
623+
624+
<Loader tip="Loading schema"/>
622625
</div>
623626
) : (
624627
schema && (

‎ui/src/modules/destinations/pages/DestinationEdit.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useState, useEffect } from "react"
22
import { useParams, Link, useNavigate } from "react-router-dom"
33
import { formatDistanceToNow } from "date-fns"
4-
import { Input, Button, Select, Switch, message, Spin, Table } from "antd"
4+
import { Input, Button, Select, Switch, message, Table } from "antd"
55
import type { ColumnsType } from "antd/es/table"
66
import { ArrowLeft, Info, Notebook, PencilSimple } from "@phosphor-icons/react"
77

@@ -42,6 +42,7 @@ import TestConnectionFailureModal from "../../common/Modals/TestConnectionFailur
4242
import TestConnectionModal from "../../common/Modals/TestConnectionModal"
4343
import EntityEditModal from "../../common/Modals/EntityEditModal"
4444
import { connectorOptions } from "../components/connectorOptions"
45+
import Loader from "../../common/components/Loader"
4546

4647
const DestinationEdit: React.FC<DestinationEditProps> = ({
4748
fromJobFlow = false,
@@ -607,7 +608,7 @@ const DestinationEdit: React.FC<DestinationEditProps> = ({
607608
</label>
608609
{loadingVersions ? (
609610
<div className="flex h-8 items-center justify-center">
610-
<Spin size="small" />
611+
<Loader size="small" />
611612
</div>
612613
) : versions.length > 0 ? (
613614
<Select
@@ -636,7 +637,7 @@ const DestinationEdit: React.FC<DestinationEditProps> = ({
636637
<h3 className="mb-4 text-lg font-medium">Endpoint config</h3>
637638
{isLoading ? (
638639
<div className="flex h-32 items-center justify-center">
639-
<Spin tip="Loading schema..." />
640+
<Loader tip="Loading schema..." />
640641
</div>
641642
) : schema ? (
642643
<FixedSchemaForm

‎ui/src/modules/destinations/pages/Destinations.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
11
import { useState, useEffect } from "react"
22
import { useNavigate } from "react-router-dom"
33
import { Path, Plus } from "@phosphor-icons/react"
4-
import { Button, Tabs, Empty, message, Spin } from "antd"
4+
import { Button, Tabs, Empty, message } from "antd"
55

66
import analyticsService from "../../../api/services/analyticsService"
77
import { useAppStore } from "../../../store"
88
import { Entity } from "../../../types"
99
import { destinationTabs } from "../../../utils/constants"
1010
import DestinationEmptyState from "../components/DestinationEmptyState"
1111
import DestinationTable from "../components/DestinationTable"
12+
import Loader from "../../common/components/Loader"
1213

1314
const Destinations: React.FC = () => {
1415
const [activeTab, setActiveTab] = useState("active")
@@ -122,7 +123,7 @@ const Destinations: React.FC = () => {
122123
label: tab.label,
123124
children: isLoadingDestinations ? (
124125
<div className="flex items-center justify-center py-16">
125-
<Spin
126+
<Loader
126127
size="large"
127128
tip="Loading destinations..."
128129
/>

‎ui/src/modules/jobs/pages/JobEdit.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useState, useEffect } from "react"
22
import clsx from "clsx"
33
import { useNavigate, Link, useParams } from "react-router-dom"
4-
import { message, Spin } from "antd"
4+
import { message } from "antd"
55
import { ArrowLeft, ArrowRight } from "@phosphor-icons/react"
66

77
import { useAppStore } from "../../../store"
@@ -28,6 +28,7 @@ import {
2828
validateCronExpression,
2929
} from "../../../utils/utils"
3030
import { DESTINATION_INTERNAL_TYPES } from "../../../utils/constants"
31+
import Loader from "../../common/components/Loader"
3132

3233
// Custom wrapper component for SourceEdit to use in job flow
3334
const JobSourceEdit = ({
@@ -411,7 +412,7 @@ const JobEdit: React.FC = () => {
411412
if (!job && jobId) {
412413
return (
413414
<div className="flex h-screen items-center justify-center">
414-
<Spin tip="Loading job data..." />
415+
<Loader tip="Loading job data..." />
415416
</div>
416417
)
417418
}

‎ui/src/modules/jobs/pages/JobHistory.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useEffect, useState, useRef } from "react"
22
import clsx from "clsx"
33
import { useParams, useNavigate, Link } from "react-router-dom"
4-
import { Table, Button, Input, Spin, message, Pagination, Tooltip } from "antd"
4+
import { Table, Button, Input, message, Pagination, Tooltip } from "antd"
55
import {
66
ArrowLeft,
77
ArrowRight,
@@ -16,6 +16,7 @@ import {
1616
getStatusLabel,
1717
} from "../../../utils/utils"
1818
import { getStatusIcon } from "../../../utils/statusIcons"
19+
import Loader from "../../common/components/Loader"
1920

2021
const JobHistory: React.FC = () => {
2122
const { jobId } = useParams<{ jobId: string }>()
@@ -225,7 +226,7 @@ const JobHistory: React.FC = () => {
225226

226227
{isDelayingCall || isLoadingJobTasks ? (
227228
<div className="flex items-center justify-center p-12">
228-
<Spin size="large" />
229+
<Loader size="large" />
229230
</div>
230231
) : (
231232
<>

‎ui/src/modules/jobs/pages/JobLogs.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useEffect, useState } from "react"
22
import clsx from "clsx"
33
import { useParams, useNavigate, Link, useSearchParams } from "react-router-dom"
4-
import { Input, Spin, message, Button, Tooltip } from "antd"
4+
import { Input, message, Button, Tooltip } from "antd"
55
import { ArrowLeft, ArrowRight, ArrowsClockwise } from "@phosphor-icons/react"
66

77
import { useAppStore } from "../../../store"
@@ -10,6 +10,7 @@ import {
1010
getLogLevelClass,
1111
getLogTextColor,
1212
} from "../../../utils/utils"
13+
import Loader from "../../common/components/Loader"
1314

1415
const JobLogs: React.FC = () => {
1516
const { jobId, historyId } = useParams<{
@@ -193,7 +194,7 @@ const JobLogs: React.FC = () => {
193194

194195
{isLoadingTaskLogs ? (
195196
<div className="flex items-center justify-center p-12">
196-
<Spin size="large" />
197+
<Loader size="large" />
197198
</div>
198199
) : (
199200
<div

0 commit comments

Comments
 (0)