From 9890fa61feaf98b7180b263bf92a66ee5d479ec5 Mon Sep 17 00:00:00 2001
From: Brandon Thomas <echelon@gmail.com>
Date: Thu, 27 May 2021 02:50:43 -0400
Subject: [PATCH] fix infinite render, nice tiling

---
 .../src/v2/w2l_template_list/W2lTemplateListFc.tsx    | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/vocodes/src/v2/w2l_template_list/W2lTemplateListFc.tsx b/vocodes/src/v2/w2l_template_list/W2lTemplateListFc.tsx
index 33226ef290..4c51f9feee 100644
--- a/vocodes/src/v2/w2l_template_list/W2lTemplateListFc.tsx
+++ b/vocodes/src/v2/w2l_template_list/W2lTemplateListFc.tsx
@@ -59,7 +59,7 @@ function W2lTemplateListFc(props: Props) {
     .catch(e => {
       //this.props.onSpeakErrorCallback();
     });
-  });
+  }, []); // NB: Empty array dependency sets to run ONLY on mount
 
   let templateElements : Array<JSX.Element> = [];
 
@@ -95,7 +95,7 @@ function W2lTemplateListFc(props: Props) {
   let allRowsOfTemplateElements : Array<JSX.Element> = [];
   let rowOfTemplateElements : Array<JSX.Element> = [];
 
-  let nextRowSize = 4;
+  let nextRowSize = getRandomInt(3, 4);
 
   templateElements.forEach(el => {
     rowOfTemplateElements.push(el);
@@ -107,7 +107,12 @@ function W2lTemplateListFc(props: Props) {
         </div>
       );
       rowOfTemplateElements = [];
-      nextRowSize = getRandomInt(1, 4);
+
+      // Don't have the same number on each row.
+      let lastRowSize = nextRowSize;
+      while (lastRowSize === nextRowSize) {
+        nextRowSize = getRandomInt(2, 5);
+      }
     }
   });