Feat/loader component

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

@@ -1,4 +1,4 @@
-import { Spin } from "antd"
+import Loader from "./Loader"
 
 interface LazyLoadingIndicatorProps {
 	message?: string
@@ -9,7 +9,7 @@ const LazyLoadingIndicator: React.FC<LazyLoadingIndicatorProps> = ({
 }) => {
 	return (
 		<div className="flex h-[calc(100vh-64px)] flex-col items-center justify-center">
-			<Spin size="large" />
+			<Loader size="large" />
 			<p className="mt-4 text-gray-500">{message}</p>
 		</div>
 	)

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

@@ -0,0 +1,27 @@
+// components/Loader.tsx
+import React from "react"
+import LoaderSquares from "../../../assets/loader-squares.gif"
+import { LoaderComponentSize } from "../../../utils/constants"
+
+type LoaderProps = {
+	size?: "large" | "small"
+	tip?: string
+}
+
+const Loader: React.FC<LoaderProps> = ({ size = "small", tip }) => {
+	const width =
+		size === "large" ? LoaderComponentSize.large : LoaderComponentSize.small
+
+	return (
+		<div className="flex h-full w-full items-center justify-center">
+			<img
+				width={width}
+				src={LoaderSquares}
+				alt="Loading..."
+			/>
+			{tip && <span className="invisible">{tip}</span>}
+		</div>
+	)
+}
+
+export default Loader

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

@@ -1,15 +1,15 @@
-import { Spin } from "antd"
+import Loader from "./Loader"
 
 export const LoadingFallback = () => (
 	<div className="flex h-[calc(100vh-64px)] items-center justify-center">
-		<Spin size="large" />
+		<Loader size="large" />
 	</div>
 )
 
 export const AuthLoadingScreen = () => (
 	<div className="flex h-screen items-center justify-center">
 		<div className="text-center">
-			<Spin size="large" />
+			<Loader size="large" />
 		</div>
 	</div>
 )

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

@@ -1,6 +1,6 @@
 import { useState, useEffect, forwardRef, useImperativeHandle } from "react"
 import { Link, useNavigate } from "react-router-dom"
-import { Input, message, Select, Spin } from "antd"
+import { Input, message, Select } from "antd"
 import { ArrowLeft, ArrowRight, Info, Notebook } from "@phosphor-icons/react"
 
 import { useAppStore } from "../../../store"
@@ -38,6 +38,7 @@ import TestConnectionFailureModal from "../../common/Modals/TestConnectionFailur
 import EntitySavedModal from "../../common/Modals/EntitySavedModal"
 import EntityCancelModal from "../../common/Modals/EntityCancelModal"
 import { connectorOptions } from "../components/connectorOptions"
+import Loader from "../../common/components/Loader"
 
 type ConnectorType = (typeof CONNECTOR_TYPES)[keyof typeof CONNECTOR_TYPES]
 
@@ -547,9 +548,12 @@ const CreateDestination = forwardRef<
 						</FormField>
 
 						<FormField label="Version:">
-							{loadingVersions ? (
+							{loadingVersions || true ? (
 								<div className="flex h-8 items-center justify-center">
-									<Spin size="small" />
+									<Loader
+										tip=""
+										size="small"
+									></Loader>
 								</div>
 							) : versions && versions.length > 0 ? (
 								<Select
@@ -618,7 +622,7 @@ const CreateDestination = forwardRef<
 				<>
 					{loading ? (
 						<div className="flex h-32 items-center justify-center">
-							<Spin tip="Loading schema..." />
+							<Loader tip="Loading schema" />
 						</div>
 					) : (
 						schema && (

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

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react"
 import { useParams, Link, useNavigate } from "react-router-dom"
 import { formatDistanceToNow } from "date-fns"
-import { Input, Button, Select, Switch, message, Spin, Table } from "antd"
+import { Input, Button, Select, Switch, message, Table } from "antd"
 import type { ColumnsType } from "antd/es/table"
 import { ArrowLeft, Info, Notebook, PencilSimple } from "@phosphor-icons/react"
 
@@ -42,6 +42,7 @@ import TestConnectionFailureModal from "../../common/Modals/TestConnectionFailur
 import TestConnectionModal from "../../common/Modals/TestConnectionModal"
 import EntityEditModal from "../../common/Modals/EntityEditModal"
 import { connectorOptions } from "../components/connectorOptions"
+import Loader from "../../common/components/Loader"
 
 const DestinationEdit: React.FC<DestinationEditProps> = ({
 	fromJobFlow = false,
@@ -607,7 +608,7 @@ const DestinationEdit: React.FC<DestinationEditProps> = ({
 							</label>
 							{loadingVersions ? (
 								<div className="flex h-8 items-center justify-center">
-									<Spin size="small" />
+									<Loader size="small" />
 								</div>
 							) : versions.length > 0 ? (
 								<Select
@@ -636,7 +637,7 @@ const DestinationEdit: React.FC<DestinationEditProps> = ({
 				<h3 className="mb-4 text-lg font-medium">Endpoint config</h3>
 				{isLoading ? (
 					<div className="flex h-32 items-center justify-center">
-						<Spin tip="Loading schema..." />
+						<Loader tip="Loading schema..." />
 					</div>
 				) : schema ? (
 					<FixedSchemaForm

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

@@ -1,14 +1,15 @@
 import { useState, useEffect } from "react"
 import { useNavigate } from "react-router-dom"
 import { Path, Plus } from "@phosphor-icons/react"
-import { Button, Tabs, Empty, message, Spin } from "antd"
+import { Button, Tabs, Empty, message } from "antd"
 
 import analyticsService from "../../../api/services/analyticsService"
 import { useAppStore } from "../../../store"
 import { Entity } from "../../../types"
 import { destinationTabs } from "../../../utils/constants"
 import DestinationEmptyState from "../components/DestinationEmptyState"
 import DestinationTable from "../components/DestinationTable"
+import Loader from "../../common/components/Loader"
 
 const Destinations: React.FC = () => {
 	const [activeTab, setActiveTab] = useState("active")
@@ -122,7 +123,7 @@ const Destinations: React.FC = () => {
 					label: tab.label,
 					children: isLoadingDestinations ? (
 						<div className="flex items-center justify-center py-16">
-							<Spin
+							<Loader
 								size="large"
 								tip="Loading destinations..."
 							/>

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

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react"
 import clsx from "clsx"
 import { useNavigate, Link, useParams } from "react-router-dom"
-import { message, Spin } from "antd"
+import { message } from "antd"
 import { ArrowLeft, ArrowRight } from "@phosphor-icons/react"
 
 import { useAppStore } from "../../../store"
@@ -28,6 +28,7 @@ import {
 	validateCronExpression,
 } from "../../../utils/utils"
 import { DESTINATION_INTERNAL_TYPES } from "../../../utils/constants"
+import Loader from "../../common/components/Loader"
 
 // Custom wrapper component for SourceEdit to use in job flow
 const JobSourceEdit = ({
@@ -411,7 +412,7 @@ const JobEdit: React.FC = () => {
 	if (!job && jobId) {
 		return (
 			<div className="flex h-screen items-center justify-center">
-				<Spin tip="Loading job data..." />
+				<Loader tip="Loading job data..." />
 			</div>
 		)
 	}

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

@@ -1,7 +1,7 @@
 import { useEffect, useState, useRef } from "react"
 import clsx from "clsx"
 import { useParams, useNavigate, Link } from "react-router-dom"
-import { Table, Button, Input, Spin, message, Pagination, Tooltip } from "antd"
+import { Table, Button, Input, message, Pagination, Tooltip } from "antd"
 import {
 	ArrowLeft,
 	ArrowRight,
@@ -16,6 +16,7 @@ import {
 	getStatusLabel,
 } from "../../../utils/utils"
 import { getStatusIcon } from "../../../utils/statusIcons"
+import Loader from "../../common/components/Loader"
 
 const JobHistory: React.FC = () => {
 	const { jobId } = useParams<{ jobId: string }>()
@@ -225,7 +226,7 @@ const JobHistory: React.FC = () => {
 
 				{isDelayingCall || isLoadingJobTasks ? (
 					<div className="flex items-center justify-center p-12">
-						<Spin size="large" />
+						<Loader size="large" />
 					</div>
 				) : (
 					<>

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

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react"
 import clsx from "clsx"
 import { useParams, useNavigate, Link, useSearchParams } from "react-router-dom"
-import { Input, Spin, message, Button, Tooltip } from "antd"
+import { Input, message, Button, Tooltip } from "antd"
 import { ArrowLeft, ArrowRight, ArrowsClockwise } from "@phosphor-icons/react"
 
 import { useAppStore } from "../../../store"
@@ -10,6 +10,7 @@ import {
 	getLogLevelClass,
 	getLogTextColor,
 } from "../../../utils/utils"
+import Loader from "../../common/components/Loader"
 
 const JobLogs: React.FC = () => {
 	const { jobId, historyId } = useParams<{
@@ -193,7 +194,7 @@ const JobLogs: React.FC = () => {
 
 				{isLoadingTaskLogs ? (
 					<div className="flex items-center justify-center p-12">
-						<Spin size="large" />
+						<Loader size="large" />
 					</div>
 				) : (
 					<div

ui/src/modules/jobs/pages/Jobs.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react"
 import { useNavigate } from "react-router-dom"
-import { Button, Tabs, Empty, message, Spin } from "antd"
+import { Button, Tabs, Empty, message } from "antd"
 import { GitCommit, Plus } from "@phosphor-icons/react"
 
 import { useAppStore } from "../../../store"
@@ -11,6 +11,7 @@ import { JOB_TYPES } from "../../../utils/constants"
 import JobTable from "../components/JobTable"
 import JobEmptyState from "../components/JobEmptyState"
 import DeleteJobModal from "../../common/Modals/DeleteJobModal"
+import Loader from "../../common/components/Loader"
 
 const Jobs: React.FC = () => {
 	const [activeTab, setActiveTab] = useState<JobType>(
@@ -191,7 +192,7 @@ const Jobs: React.FC = () => {
 					label: tab.label,
 					children: isLoadingJobs ? (
 						<div className="flex items-center justify-center py-16">
-							<Spin
+							<Loader
 								size="large"
 								tip="Loading sources..."
 							/>

ui/src/modules/jobs/pages/SchemaConfiguration.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useMemo, useRef } from "react"
-import { Input, Empty, Spin } from "antd"
+import { Input, Empty } from "antd"
 
 import { sourceService } from "../../../api"
 import {
@@ -12,6 +12,7 @@ import FilterButton from "../components/FilterButton"
 import StepTitle from "../../common/components/StepTitle"
 import StreamsCollapsibleList from "./streams/StreamsCollapsibleList"
 import StreamConfiguration from "./streams/StreamConfiguration"
+import Loader from "../../common/components/Loader"
 
 const SchemaConfiguration: React.FC<SchemaConfigurationProps> = ({
 	setSelectedStreams,
@@ -483,7 +484,7 @@ const SchemaConfiguration: React.FC<SchemaConfigurationProps> = ({
 						/>
 					) : loading ? (
 						<div className="flex h-[calc(100vh-250px)] items-center justify-center">
-							<Spin size="large"></Spin>
+							<Loader size="large" />
 						</div>
 					) : (
 						<Empty className="flex h-full flex-col items-center justify-center" />

ui/src/modules/sources/pages/CreateSource.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, forwardRef, useImperativeHandle } from "react"
 import { Link, useNavigate } from "react-router-dom"
-import { message, Select, Spin } from "antd"
+import { message, Select } from "antd"
 import { ArrowLeft, ArrowRight, Info, Notebook } from "@phosphor-icons/react"
 
 import { useAppStore } from "../../../store"
@@ -21,6 +21,7 @@ import EntitySavedModal from "../../common/Modals/EntitySavedModal"
 import EntityCancelModal from "../../common/Modals/EntityCancelModal"
 import connectorOptions from "../components/connectorOptions"
 import { SETUP_TYPES } from "../../../utils/constants"
+import Loader from "../../common/components/Loader"
 
 // Create ref handle interface
 export interface CreateSourceHandle {
@@ -393,7 +394,7 @@ const CreateSource = forwardRef<CreateSourceHandle, CreateSourceProps>(
 						</label>
 						{loadingVersions ? (
 							<div className="flex h-8 items-center justify-center">
-								<Spin size="small" />
+								<Loader size="small" />
 							</div>
 						) : versions && versions.length > 0 ? (
 							<>
@@ -472,7 +473,7 @@ const CreateSource = forwardRef<CreateSourceHandle, CreateSourceProps>(
 				<>
 					{loading ? (
 						<div className="flex h-32 items-center justify-center">
-							<Spin tip="Loading schema..." />
+							<Loader tip="Loading schema..." />
 						</div>
 					) : (
 						schema && (

ui/src/modules/sources/pages/SourceEdit.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react"
 import { useParams, useNavigate, Link } from "react-router-dom"
 import { formatDistanceToNow } from "date-fns"
-import { Input, Button, Select, Switch, message, Table, Spin } from "antd"
+import { Input, Button, Select, Switch, message, Table } from "antd"
 import type { ColumnsType } from "antd/es/table"
 import {
 	GenderNeuter,
@@ -34,6 +34,7 @@ import {
 	connectorTypeMap,
 	DISPLAYED_JOBS_COUNT,
 } from "../../../utils/constants"
+import Loader from "../../common/components/Loader"
 
 const SourceEdit: React.FC<SourceEditProps> = ({
 	fromJobFlow = false,
@@ -555,7 +556,7 @@ const SourceEdit: React.FC<SourceEditProps> = ({
 												</label>
 												{loadingVersions ? (
 													<div className="flex h-8 items-center justify-center">
-														<Spin size="small" />
+														<Loader size="small" />
 													</div>
 												) : availableVersions.length > 0 ? (
 													<Select
@@ -587,7 +588,7 @@ const SourceEdit: React.FC<SourceEditProps> = ({
 										</div>
 										{loading ? (
 											<div className="flex h-32 items-center justify-center">
-												<Spin tip="Loading schema..." />
+												<Loader tip="Loading schema..." />
 											</div>
 										) : (
 											schema && (

ui/src/modules/sources/pages/Sources.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react"
 import { useNavigate } from "react-router-dom"
-import { Button, Tabs, Empty, message, Spin } from "antd"
+import { Button, Tabs, Empty, message } from "antd"
 import { LinktreeLogo, Plus } from "@phosphor-icons/react"
 
 import { useAppStore } from "../../../store"
@@ -9,6 +9,7 @@ import { Entity } from "../../../types"
 import { sourceTabs } from "../../../utils/constants"
 import SourceTable from "../components/SourceTable"
 import SourceEmptyState from "../components/SourceEmptyState"
+import Loader from "../../common/components/Loader"
 
 const Sources: React.FC = () => {
 	const [activeTab, setActiveTab] = useState("active")
@@ -124,7 +125,7 @@ const Sources: React.FC = () => {
 					label: tab.label,
 					children: isLoadingSources ? (
 						<div className="flex items-center justify-center py-16">
-							<Spin
+							<Loader
 								size="large"
 								tip="Loading sources..."
 							/>

ui/src/utils/constants.ts

@@ -138,6 +138,10 @@ export const sourceTabs = [
 	{ key: STATUS.INACTIVE, label: "Inactive sources" },
 ]
 
+export const LoaderComponentSize = {
+	small: 50,
+	large: 135,
+}
 export const mapCatalogValueToType = (
 	catalogValue: string,
 ): CatalogType | null => {