new LoadingScreen to replace old loading divs

website/src/components/Loading/Loading.stories.jsx

@@ -0,0 +1,16 @@
+import { LoadingScreen } from "./LoadingScreen";
+
+export default {
+  title: "Example/LoadingScreen",
+  component: LoadingScreen,
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+const Template = (args) => <LoadingScreen {...args} />; //<><div>text</div><div className="max-w-500 mt-40 z-1000 h-full relative"></div></>;
+
+export const Default = Template.bind({});
+
+export const WithText = Template.bind({});
+WithText.args = { text: "Loading Text ..." };

website/src/components/Loading/LoadingScreen.jsx

@@ -0,0 +1,12 @@
+import { Progress } from "@chakra-ui/react";
+
+export const LoadingScreen = ({ text }) => (
+  <div className="bg-slate-100">
+    <Progress size="xs" isIndeterminate />
+    {text && (
+      <div className="flex h-full">
+        <div className="text-xl font-bold text-gray-800  mx-auto my-auto">{text}</div>
+      </div>
+    )}
+  </div>
+);