Merge pull request #164 from Lodestone-Team/newLoadingCard

package.json

@@ -44,6 +44,7 @@
     "rc-tooltip": "^5.2.2",
     "react": "^18.2.0",
     "react-chartjs-2": "^4.3.1",
+    "react-circular-progressbar": "^2.1.0",
     "react-device-detect": "^2.2.2",
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.5",

src/components/Atoms/CircularProgress.tsx

@@ -0,0 +1,19 @@
+import { CircularProgressbar, buildStyles } from 'react-circular-progressbar';
+import 'react-circular-progressbar/dist/styles.css';
+
+export default function CircularProgress({
+  progress_percent = 0,
+}: {
+  progress_percent?: number;
+}) {
+  return (
+    <CircularProgressbar
+      value={progress_percent * 100}
+      styles={buildStyles({
+        pathColor: '#59B2F3',
+        trailColor: 'rgba(209, 209, 218, 0.1)',
+      })}
+      strokeWidth={15}
+    />
+  );
+}

src/components/DashboardLayout/InstanceList.tsx

@@ -1,7 +1,8 @@
 import { faServer } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { RadioGroup } from '@headlessui/react';
-import InstanceLoadingCard from 'components/InstanceLoadingCard';
+import InstanceLoadingPill from 'components/InstanceLoadingPill';
+import InstanceLoadingCard from 'components/InstanceLoadingPill';
 import InstancePill from 'components/InstancePill';
 import { InstanceContext } from 'data/InstanceContext';
 import { NotificationContext } from 'data/NotificationContext';
@@ -76,28 +77,14 @@ export default function InstanceList({
               notification.start_value,
               otherwise(
                 {
-                  InstanceCreation: ({
-                    instance_uuid,
-                    instance_name,
-                    port,
-                    flavour,
-                    game_type,
-                  }) => (
-                    <InstanceLoadingCard
+                  InstanceCreation: ({ instance_uuid }) => (
+                    <InstanceLoadingPill
                       key={instance_uuid}
-                      uuid={instance_uuid}
-                      name={instance_name}
-                      port={port}
-                      flavour={flavour}
-                      game_type={game_type}
-                      level={notification.level}
-                      state={notification.state}
                       progress_percent={
                         notification.total
                           ? notification.progress / notification.total
                           : undefined
                       }
-                      progress_title={'Setting up...'}
                     />
                   ),
                 },

src/components/InstanceLoadingPill.stories.tsx

@@ -0,0 +1,18 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import InstanceLoadingPill from './InstanceLoadingPill';
+
+export default {
+  title: 'library/InstanceLoadingPill',
+  component: InstanceLoadingPill,
+} as ComponentMeta<typeof InstanceLoadingPill>;
+
+const Template: ComponentStory<typeof InstanceLoadingPill> = (args) => (
+  <div className="flex w-60 flex-col child:w-full">
+    <InstanceLoadingPill {...args} />
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  progress_percent: 0.5,
+};

src/components/InstanceLoadingPill.tsx

@@ -0,0 +1,40 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import clsx from 'clsx';
+import { faCircle } from '@fortawesome/free-solid-svg-icons';
+import { stateToColor } from 'utils/util';
+import CircularProgress from './Atoms/CircularProgress';
+
+export default function InstanceLoadingPill({
+  progress_percent = 0,
+}: {
+  progress_percent?: number;
+}) {
+  const stateColor = stateToColor['Starting'];
+
+  return (
+    <button
+      className={clsx(
+        'flex flex-row items-center gap-x-1.5',
+        'rounded-md py-1 px-2',
+        'text-medium font-bold leading-5 tracking-medium',
+        'text-white/50 ui-checked:text-gray-300',
+        'ui-checked:bg-gray-800 ui-checked:outline ui-checked:outline-1 ui-checked:outline-fade-700 ui-not-checked:hover:bg-gray-800',
+        'focus-visible:outline-none enabled:focus-visible:ring-4 enabled:focus-visible:ring-blue-faded/50'
+      )}
+    >
+      <div className="h-4 w-4">
+        <CircularProgress
+          progress_percent={progress_percent}
+        ></CircularProgress>
+      </div>
+
+      <p className="grow truncate text-left italic">
+        Setting up... ({Math.round(progress_percent * 100)}%)
+      </p>
+      <FontAwesomeIcon
+        icon={faCircle}
+        className={`select-none ${stateColor} text-[8px]`}
+      />
+    </button>
+  );
+}