diff --git a/src/components/landing-page/productions-list.tsx b/src/components/landing-page/productions-list.tsx
index 3096786f..b7f4adb6 100644
--- a/src/components/landing-page/productions-list.tsx
+++ b/src/components/landing-page/productions-list.tsx
@@ -33,13 +33,15 @@ const ProductionId = styled.div`
 
 export const ProductionsList = () => {
   const [productions, setProductions] = useState<TProduction[]>([]);
+  const [intervalLoad, setIntervalLoad] = useState<boolean>(false);
   const [{ reloadProductionList }, dispatch] = useGlobalState();
 
   // TODO extract to separate hook file
   useEffect(() => {
     let aborted = false;
 
-    if (reloadProductionList) {
+    if (reloadProductionList || intervalLoad) {
+      setIntervalLoad(false);
       API.listProductions()
         .then((result) => {
           if (aborted) return;
@@ -73,13 +75,26 @@ export const ProductionsList = () => {
           // TODO handle error/retry
         });
     }
+
     return () => {
       aborted = true;
     };
-  }, [dispatch, reloadProductionList]);
+  }, [dispatch, reloadProductionList, intervalLoad]);
+
+  useEffect(() => {
+    const interval = window.setInterval(() => {
+      setIntervalLoad(true);
+    }, 10000);
+
+    return () => {
+      window.clearInterval(interval);
+    };
+  }, []);
 
   return (
     <ProductionListContainer>
+      {/* // TODO handle so future load-component isn't shown on every update
+      // TODO ex className={loading && !intervalLoad ? "active" : "in-active"} */}
       {/* TODO add loading indicator */}
       {productions.map((p) => (
         <ProductionItem key={p.id}>