fixed inputs appearance and global loader

src/components/input/InputWrapper/styles.module.scss

@@ -9,6 +9,7 @@
   position: relative;
   color: $input_text_color;
   font: $input_font;
+  min-width: 0;
 
   ::placeholder {
     font: $input_placeholder_font;
@@ -21,6 +22,16 @@
   }
 }
 
+.error, .title {
+  pointer-events: none;
+  touch-action: none;
+  user-select: none;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  max-width: calc(100% - 10px);
+}
+
 .error {
   position: absolute;
   font: $font_12_semibold;
@@ -31,8 +42,6 @@
   bottom: 0;
   right: $gap / 2;
   transform: translate(0, 50%);
-  pointer-events: none;
-  touch-action: none;
 }
 
 .title {
@@ -48,8 +57,6 @@
   background-color: $input_bg_color;
   color: $input_grey_color;
   text-transform: uppercase;
-  pointer-events: none;
-  touch-action: none;
 
   .focused &, .not_empty & {
     transform: translate(0, -100%) scale(0.75);

src/hooks/dom/useGlobalLoader.ts

@@ -5,15 +5,15 @@ import { useFlowLoader } from '~/hooks/flow/useFlowLoader';
 
 /** simply waits for all data to settle and then show the app */
 export const useGlobalLoader = () => {
-  useFlowLoader();
-
+  const { getInitialNodes } = useFlowLoader();
   const flow = useFlowStore();
 
   useEffect(() => {
     if (!flow.isRefreshed) {
+      void getInitialNodes();
       return;
     }
 
     hideLoader();
-  }, [flow.isRefreshed]);
+  }, [flow.isRefreshed, getInitialNodes]);
 };

src/hooks/flow/useFlowLoader.ts

@@ -82,13 +82,5 @@ export const useFlowLoader = () => {
     }
   }, [flow]);
 
-  useEffect(() => {
-    if (flow.isRefreshed) {
-      return;
-    }
-
-    void getInitialNodes();
-  }, [flow, getInitialNodes]);
-
   return { getInitialNodes, isSyncing, loadMore };
 };