feat(dashboard): empty state for tree listing.

this makes a label "No Data." appear when there's no data in tree
listing.

Closes #173

dashboard/src/components/Skeleton/Skeleton.tsx

@@ -1,14 +1,18 @@
-import type { ReactNode } from 'react';
+import type { ReactNode, ComponentProps } from 'react';
 
 import { Skeleton as SkeletonComponent } from '@/components/ui/skeleton'; //to avoid name conflict we rename the import
 
-type SkeletonProps = {
+import { cn } from '@/lib/utils';
+
+type SkeletonProps = ComponentProps<typeof SkeletonComponent> & {
   children: ReactNode;
 };
 
-const Skeleton = ({ children }: SkeletonProps): JSX.Element => {
+const Skeleton = ({ children, className }: SkeletonProps): JSX.Element => {
   return (
-    <SkeletonComponent className="grid h-[400px] place-items-center">
+    <SkeletonComponent
+      className={cn('grid h-[400px] place-items-center', className)}
+    >
       {children}
     </SkeletonComponent>
   );

dashboard/src/components/TreeListingPage/TreeListingPage.tsx

@@ -90,7 +90,7 @@ const TreeListingPage = ({ inputFilter }: ITreeListingPage): JSX.Element => {
       </Skeleton>
     );
 
-  return (
+  return data && data.length > 0 ? (
     <div className="flex flex-col gap-6">
       <div className="flex flex-col items-end gap-4">
         <TableInfo
@@ -114,6 +114,10 @@ const TreeListingPage = ({ inputFilter }: ITreeListingPage): JSX.Element => {
         />
       </div>
     </div>
+  ) : (
+    <div className="grid h-[400px] place-items-center rounded-md bg-slate-100 dark:bg-slate-800">
+      <FormattedMessage id="global.noData" />
+    </div>
   );
 };
 

dashboard/src/index.css

@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+.remove-animate-pulse.animate-pulse {
+  animation: none !important;
+}

dashboard/src/locales/messages/index.ts

@@ -86,6 +86,7 @@ export const messages = {
     'global.missed': 'Missed',
     'global.modules': 'Modules',
     'global.name': 'Name',
+    'global.noData': 'No data.',
     'global.noDataAvailable': 'No data available',
     'global.noResults': 'No results were found',
     'global.none': 'None',