Merge pull request #1055 from rainlanguage/2024-12-10-migrate-button-…

…loading-component

Move ButtonLoading.svelte component in ui-components.

packages/ui-components/src/lib/components/ButtonLoading.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Button, Spinner } from 'flowbite-svelte';
+
+	export let loading = false;
+	export let disabled = false;
+</script>
+
+<Button disabled={loading || disabled} {...$$props} on:click>
+	{#if loading}
+		<Spinner class="mr-2 h-4 w-4" color="white" />
+	{/if}
+	<slot />
+</Button>

packages/ui-components/src/lib/index.ts

@@ -34,6 +34,7 @@ export { default as Heading } from './components/Heading.svelte';
 export { default as Text } from './components/Text.svelte';
 export { default as DropdownProperty } from './components/DropdownProperty.svelte';
 export { default as IconError } from './components/IconError.svelte';
+export { default as ButtonLoading } from './components/ButtonLoading.svelte';
 
 //Types
 export type { AppStoresInterface } from './types/appStores.ts';

tauri-app/src/lib/components/AppTable.svelte

@@ -3,7 +3,7 @@
   import { FileCsvOutline } from 'flowbite-svelte-icons';
   import ButtonsPagination from '$lib/components/ButtonsPagination.svelte';
   import type { ListStore } from '$lib/storesGeneric/listStore';
-  import ButtonLoading from './ButtonLoading.svelte';
+  import { ButtonLoading } from '@rainlanguage/ui-components';
   import { createEventDispatcher } from 'svelte';
 
   const dispatch = createEventDispatcher();

tauri-app/src/lib/components/FileTextarea.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { TextFileStore } from '$lib/storesGeneric/textFileStore';
-  import ButtonLoading from './ButtonLoading.svelte';
+  import { ButtonLoading } from '@rainlanguage/ui-components';
 
   export let textFile: TextFileStore;
 </script>

tauri-app/src/lib/components/InputLedgerWallet.svelte

@@ -7,7 +7,7 @@
   import { reportErrorToSentry } from '$lib/services/sentry';
   import IconWarning from '$lib/components/IconWarning.svelte';
   import { ledgerWalletAddress, ledgerWalletDerivationIndex } from '$lib/stores/wallets';
-  import ButtonLoading from './ButtonLoading.svelte';
+  import { ButtonLoading } from '@rainlanguage/ui-components';
   import { Hash, HashType } from '@rainlanguage/ui-components';
 
   const maskOptions = {

tauri-app/src/lib/components/InputWalletConnect.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import IconWarning from '$lib/components/IconWarning.svelte';
   import { Alert } from 'flowbite-svelte';
-  import ButtonLoading from './ButtonLoading.svelte';
+  import { ButtonLoading } from '@rainlanguage/ui-components';
   import { Hash, HashType } from '@rainlanguage/ui-components';
   import {
     walletconnectConnect,

tauri-app/src/lib/components/ModalExecute.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Button, Modal } from 'flowbite-svelte';
-  import ButtonLoading from '$lib/components/ButtonLoading.svelte';
+  import { ButtonLoading } from '@rainlanguage/ui-components';
   import { settings } from '$lib/stores/settings';
   import { ledgerWalletAddress } from '$lib/stores/wallets';
   import InputLedgerWallet from '$lib/components/InputLedgerWallet.svelte';

tauri-app/src/routes/orders/add/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { PageHeader } from '@rainlanguage/ui-components';
   import CodeMirrorDotrain from '$lib/components/CodeMirrorDotrain.svelte';
-  import ButtonLoading from '$lib/components/ButtonLoading.svelte';
+  import { ButtonLoading } from '@rainlanguage/ui-components';
   import FileTextarea from '$lib/components/FileTextarea.svelte';
   import { Label, Button, Spinner, Tabs, TabItem } from 'flowbite-svelte';
   import { RawRainlangExtension, type Problem } from 'codemirror-rainlang';