From 7cd6d60ba9efeff61fcb9016a7fed725813fac18 Mon Sep 17 00:00:00 2001
From: spaenleh <spaenleh@gmail.com>
Date: Fri, 30 Jun 2023 10:39:18 +0200
Subject: [PATCH] fix: interface and url

---
 src/App.tsx                |  4 ++--
 src/components/UseCase.tsx | 32 ++++++++++++++++++++++++++++----
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index c577f18..b3b6b20 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -108,8 +108,8 @@ const App = () => {
               <UseCase
                 label="Privacy"
                 description="The Privacy use case categorizes concepts extracted from images into clusters of interest."
-                nodesFile="/privacy-use-case/nodes.json"
-                categoriesFile="/privacy-use-case/categories.json"
+                nodesFile="./privacy-use-case/nodes.json"
+                categoriesFile="./privacy-use-case/categories.json"
                 onSubmit={(d) => setExplanationData(convertToString(d))}
               />
             </SettingsWrapper>
diff --git a/src/components/UseCase.tsx b/src/components/UseCase.tsx
index 72c564b..56402d3 100644
--- a/src/components/UseCase.tsx
+++ b/src/components/UseCase.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { ExplanationData } from "../WordCloud";
 import { transformGPipelineData } from "./utils/transformations";
 
@@ -55,7 +56,9 @@ const UseCase = ({
   categoriesFile,
   onSubmit,
 }: Props) => {
+  const [loadingData, setLoadingData] = useState(false);
   const onClick = async () => {
+    setLoadingData(true);
     // load the data from the files
     const nodesFileData = await fetch(nodesFile);
     const nodes = await nodesFileData.json();
@@ -64,15 +67,36 @@ const UseCase = ({
     console.log(nodes, categories);
     const xData = transformGPipelineData(nodes, categories);
     onSubmit(xData);
+    setLoadingData(false);
   };
 
   return (
     <div className="flex flex-col max-w-sm">
-      <div>{label}</div>
-      <div className="text-zinc-500 text-sm">{description}</div>
-      <button className="btn btn-blue" onClick={onClick}>
-        Use
+      <button
+        className="inline-flex items-center leading-6 btn btn-blue"
+        onClick={onClick}
+      >
+        {loadingData ? (
+          <svg className="animate-spin h-5 w-5 mr-3" viewBox="0 0 24 24">
+            <circle
+              className="opacity-25"
+              cx="12"
+              cy="12"
+              r="10"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="4"
+            />
+            <path
+              className="opacity-75"
+              fill="currentColor"
+              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            />
+          </svg>
+        ) : null}
+        <span>{loadingData ? "Loading..." : label}</span>
       </button>
+      <div className="text-zinc-500 text-sm">{description}</div>
     </div>
   );
 };