feat: add skeleton and remode debris

iotaledger · Dec 18, 2024 · 0540f8d · 0540f8d
1 parent 178c4da
commit 0540f8d
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 32 deletions.
diff --git a/apps/wallet-dashboard/components/Dialogs/migration/MigrationDialog.tsx b/apps/wallet-dashboard/components/Dialogs/migration/MigrationDialog.tsx
@@ -52,7 +52,6 @@ export function MigrationDialog({
             {
                 onSuccess: (tx) => {
                     onSuccess(tx.digest);
-                    onSuccess?.(tx.digest);
                     setTxDigest(tx.digest);
                     setView(MigrationDialogView.TransactionDetails);
                 },

diff --git a/apps/wallet-dashboard/components/Dialogs/migration/views/ConfirmMigrationView.tsx b/apps/wallet-dashboard/components/Dialogs/migration/views/ConfirmMigrationView.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React from 'react';
-import { VirtualList } from '@/components';
+import { MigrationObjectLoading, VirtualList } from '@/components';
 import { useCurrentAccount } from '@iota/dapp-kit';
 import { IotaObjectData } from '@iota/iota-sdk/client';
 import {
@@ -12,8 +12,8 @@ import {
     InfoBoxStyle,
     InfoBoxType,
     KeyValueInfo,
-    LoadingIndicator,
     Panel,
+    Skeleton,
     Title,
     TitleSize,
 } from '@iota/apps-ui-kit';
@@ -90,7 +90,20 @@ export function ConfirmMigrationView({
                         />
                     )}
                     {isLoading ? (
-                        <LoadingIndicator text="Loading migration objects" />
+                        <>
+                            <Panel hasBorder>
+                                <div className="flex flex-col gap-y-sm p-md">
+                                    <Skeleton widthClass="w-40" heightClass="h-3.5" />
+                                    <MigrationObjectLoading />
+                                </div>
+                            </Panel>
+                            <Panel hasBorder>
+                                <div className="flex flex-col gap-y-md p-md">
+                                    <Skeleton widthClass="w-full" heightClass="h-3.5" />
+                                    <Skeleton widthClass="w-full" heightClass="h-3.5" />
+                                </div>
+                            </Panel>
+                        </>
                     ) : (
                         <>
                             <Collapsible

diff --git a/apps/wallet-dashboard/components/migration/MigrationObjectLoading.tsx b/apps/wallet-dashboard/components/migration/MigrationObjectLoading.tsx
@@ -0,0 +1,27 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { Card, CardImage, ImageShape, Skeleton } from '@iota/apps-ui-kit';
+
+export function MigrationObjectLoading() {
+    return (
+        <div className="flex h-full max-h-full w-full flex-col overflow-hidden">
+            {new Array(10).fill(0).map((_, index) => (
+                <Card key={index}>
+                    <CardImage shape={ImageShape.SquareRounded}>
+                        <div className="h-10 w-10 animate-pulse bg-neutral-90 dark:bg-neutral-12" />
+                        <Skeleton widthClass="w-10" heightClass="h-10" isRounded={false} />
+                    </CardImage>
+                    <div className="flex flex-col gap-y-xs">
+                        <Skeleton widthClass="w-40" heightClass="h-3.5" />
+                        <Skeleton widthClass="w-32" heightClass="h-3" hasSecondaryColors />
+                    </div>
+                    <div className="ml-auto flex flex-col gap-y-xs">
+                        <Skeleton widthClass="w-20" heightClass="h-3.5" />
+                        <Skeleton widthClass="w-16" heightClass="h-3" hasSecondaryColors />
+                    </div>
+                </Card>
+            ))}
+        </div>
+    );
+}
diff --git a/apps/wallet-dashboard/components/migration/MigrationObjectsPanel.tsx b/apps/wallet-dashboard/components/migration/MigrationObjectsPanel.tsx
@@ -12,15 +12,11 @@ import { StardustOutputDetailsFilter } from '@/lib/enums';
 import {
     Button,
     ButtonType,
-    Card,
-    CardImage,
     Chip,
-    ImageShape,
     InfoBox,
     InfoBoxStyle,
     InfoBoxType,
     Panel,
-    Skeleton,
     Title,
 } from '@iota/apps-ui-kit';
 import type { IotaObjectData } from '@iota/iota-sdk/client';
@@ -30,6 +26,7 @@ import { useState } from 'react';
 import { MigrationObjectDetailsCard } from './migration-object-details-card';
 import VirtualList from '../VirtualList';
 import { filterMigrationObjects } from '@/lib/utils';
+import { MigrationObjectLoading } from './MigrationObjectLoading';
 
 const FILTERS = {
     migratable: STARDUST_MIGRATABLE_OBJECTS_FILTER_LIST,
@@ -83,7 +80,7 @@ export function MigrationObjectsPanel({
                     </div>
                     <div className="flex min-h-0 flex-col py-sm">
                         <div className="h-full flex-1 overflow-auto">
-                            {isLoading && <LoadingPanel />}
+                            {isLoading && <MigrationObjectLoading />}
                             {isErrored && !isLoading && (
                                 <div className="flex h-full max-h-full w-full flex-col items-center">
                                     <InfoBox
@@ -116,26 +113,3 @@ export function MigrationObjectsPanel({
         </div>
     );
 }
-
-function LoadingPanel() {
-    return (
-        <div className="flex h-full max-h-full w-full flex-col overflow-hidden">
-            {new Array(10).fill(0).map((_, index) => (
-                <Card key={index}>
-                    <CardImage shape={ImageShape.SquareRounded}>
-                        <div className="h-10 w-10 animate-pulse bg-neutral-90 dark:bg-neutral-12" />
-                        <Skeleton widthClass="w-10" heightClass="h-10" isRounded={false} />
-                    </CardImage>
-                    <div className="flex flex-col gap-y-xs">
-                        <Skeleton widthClass="w-40" heightClass="h-3.5" />
-                        <Skeleton widthClass="w-32" heightClass="h-3" hasSecondaryColors />
-                    </div>
-                    <div className="ml-auto flex flex-col gap-y-xs">
-                        <Skeleton widthClass="w-20" heightClass="h-3.5" />
-                        <Skeleton widthClass="w-16" heightClass="h-3" hasSecondaryColors />
-                    </div>
-                </Card>
-            ))}
-        </div>
-    );
-}
diff --git a/apps/wallet-dashboard/components/migration/index.ts b/apps/wallet-dashboard/components/migration/index.ts
@@ -2,3 +2,4 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export * from './MigrationObjectsPanel';
+export * from './MigrationObjectLoading';
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,3 +2,4 @@
		// SPDX-License-Identifier: Apache-2.0

		export * from './MigrationObjectsPanel';
		export * from './MigrationObjectLoading';